JavaScript字符串
字符串是JavaScript的基本数据类型之一，用于表示文本数据。字符串由零个或多个字符组成，每个字符都有一个对应的索引，从0开始。
字符串的创建
JavaScript提供了多种创建字符串的方式。
字符串字面量
使用单引号或双引号创建字符串：
javascript
const greeting1 = "Hello, World!";
const greeting2 = 'Hello, World!';
String构造函数
使用String构造函数创建字符串：
javascript
const greeting = new String("Hello, World!");
注意：使用构造函数创建的字符串是对象，而不是基本数据类型：
javascript
const str1 = "Hello";
const str2 = new String("Hello");
console.log(typeof str1); // string
console.log(typeof str2); // object
模板字符串
ES6引入的模板字符串，使用反引号`创建，可以包含占位符${}：
javascript
const name = "John";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, John!
// 多行字符串
const multiLine = `
第一行
第二行
第三行
`;
// 表达式
const a = 5;
const b = 10;
const result = `${a} + ${b} = ${a + b}`;
console.log(result); // 5 + 10 = 15
字符串的基本操作
字符串长度
使用length属性获取字符串的长度：
javascript
const str = "Hello, World!";
console.log(str.length); // 13
字符串索引
使用索引访问字符串的单个字符，索引从0开始：
javascript
const str = "Hello";
console.log(str[0]); // H
console.log(str[1]); // e
console.log(str[4]); // o
注意：字符串是不可变的，不能通过索引修改字符串的字符：
javascript
const str = "Hello";
str[0] = "h"; // 不会生效
console.log(str); // Hello
字符串拼接
使用+运算符或concat()方法拼接字符串：
javascript
const str1 = "Hello";
const str2 = "World";
// 使用+运算符
const result1 = str1 + ", " + str2 + "!";
console.log(result1); // Hello, World!
// 使用concat()方法
const result2 = str1.concat(", ", str2, "!");
console.log(result2); // Hello, World!
字符串比较
使用比较运算符比较字符串：
javascript
console.log("a" < "b"); // true
console.log("apple" < "banana"); // true
console.log("Hello" === "Hello"); // true
console.log("Hello" === "hello"); // false
注意：字符串比较是基于Unicode码点的，不是基于字母顺序的。
字符串的常用方法
JavaScript提供了许多字符串方法，以下是一些常用的方法。
字符获取方法
charAt()
返回指定索引位置的字符：
javascript
const str = "Hello";
console.log(str.charAt(0)); // H
console.log(str.charAt(4)); // o
charCodeAt()
返回指定索引位置的字符的Unicode码点：
javascript
const str = "Hello";
console.log(str.charCodeAt(0)); // 72 (H的Unicode码点)
console.log(str.charCodeAt(1)); // 101 (e的Unicode码点)
codePointAt()
ES6引入的codePointAt()方法，用于处理Unicode代理对：
javascript
const str = "𠮷";
console.log(str.charCodeAt(0)); // 55362
console.log(str.charCodeAt(1)); // 57271
console.log(str.codePointAt(0)); // 134071 (正确的Unicode码点)
字符串查找方法
indexOf()
返回子字符串在字符串中第一次出现的索引，如果不存在则返回-1：
javascript
const str = "Hello, World!";
console.log(str.indexOf("o")); // 4
console.log(str.indexOf("World")); // 7
console.log(str.indexOf("x")); // -1
// 从指定索引开始查找
console.log(str.indexOf("o", 5)); // 8
lastIndexOf()
返回子字符串在字符串中最后一次出现的索引，如果不存在则返回-1：
javascript
const str = "Hello, World!";
console.log(str.lastIndexOf("o")); // 8
console.log(str.lastIndexOf("World")); // 7
includes()
ES6引入的includes()方法，检查字符串是否包含指定的子字符串：
javascript
const str = "Hello, World!";
console.log(str.includes("World")); // true
console.log(str.includes("world")); // false
// 从指定索引开始检查
console.log(str.includes("o", 5)); // true
startsWith()
ES6引入的startsWith()方法，检查字符串是否以指定的子字符串开头：
javascript
const str = "Hello, World!";
console.log(str.startsWith("Hello")); // true
console.log(str.startsWith("World")); // false
// 从指定索引开始检查
console.log(str.startsWith("World", 7)); // true
endsWith()
ES6引入的endsWith()方法，检查字符串是否以指定的子字符串结尾：
javascript
const str = "Hello, World!";
console.log(str.endsWith("!")); // true
console.log(str.endsWith("World")); // false
// 检查指定长度的字符串
console.log(str.endsWith("World", 11)); // true
字符串提取方法
slice()
提取字符串的一部分，返回一个新字符串：
javascript
const str = "Hello, World!";
// slice(start, end)，end不包含
console.log(str.slice(7, 12)); // World
// 从start到末尾
console.log(str.slice(7)); // World!
// 使用负数索引（从末尾开始计数）
console.log(str.slice(-6, -1)); // World
console.log(str.slice(-6)); // World!
substring()
提取字符串的一部分，与slice()类似，但不支持负数索引：
javascript
const str = "Hello, World!";
console.log(str.substring(7, 12)); // World
console.log(str.substring(7)); // World!
// 如果start > end，substring()会交换它们
console.log(str.substring(12, 7)); // World
substr()
提取字符串的一部分，指定开始位置和长度（不推荐使用，可能会被移除）：
javascript
const str = "Hello, World!";
// substr(start, length)
console.log(str.substr(7, 5)); // World
console.log(str.substr(7)); // World!
// 使用负数索引（从末尾开始计数）
console.log(str.substr(-6, 5)); // World
字符串转换方法
toLowerCase()
将字符串转换为小写：
javascript
const str = "Hello, World!";
console.log(str.toLowerCase()); // hello, world!
toUpperCase()
将字符串转换为大写：
javascript
const str = "Hello, World!";
console.log(str.toUpperCase()); // HELLO, WORLD!
toLocaleLowerCase()
根据本地化规则将字符串转换为小写：
javascript
const str = "Hello, World!";
console.log(str.toLocaleLowerCase()); // hello, world!
toLocaleUpperCase()
根据本地化规则将字符串转换为大写：
javascript
const str = "Hello, World!";
console.log(str.toLocaleUpperCase()); // HELLO, WORLD!
字符串修剪方法
trim()
移除字符串两端的空白字符（空格、制表符、换行符等）：
javascript
const str = " Hello, World! ";
console.log(str.trim()); // Hello, World!
trimStart() / trimLeft()
移除字符串开头的空白字符：
javascript
const str = " Hello, World! ";
console.log(str.trimStart()); // Hello, World!
console.log(str.trimLeft()); // Hello, World! (trimLeft是trimStart的别名)
trimEnd() / trimRight()
移除字符串结尾的空白字符：
javascript
const str = " Hello, World! ";
console.log(str.trimEnd()); // Hello, World!
console.log(str.trimRight()); // Hello, World! (trimRight是trimEnd的别名)
字符串替换方法
replace()
替换字符串中的子字符串：
javascript
const str = "Hello, World!";
console.log(str.replace("World", "JavaScript")); // Hello, JavaScript!
// 使用正则表达式替换所有匹配
const str2 = "Hello, Hello, World!";
console.log(str2.replace(/Hello/g, "Hi")); // Hi, Hi, World!
// 使用回调函数
const str3 = "Hello, World!";
console.log(str3.replace(/World/, (match) => match.toUpperCase())); // Hello, WORLD!
replaceAll()
ES2021引入的replaceAll()方法，替换字符串中的所有子字符串：
javascript
const str = "Hello, Hello, World!";
console.log(str.replaceAll("Hello", "Hi")); // Hi, Hi, World!
字符串拆分方法
split()
将字符串拆分为数组：
javascript
const str = "Hello, World!";
// 使用逗号和空格拆分
console.log(str.split(", ")); // ["Hello", "World!"]
// 使用空字符串拆分（每个字符作为数组元素）
console.log(str.split("")); // ["H", "e", "l", "l", "o", ",", " ", "W", "o", "r", "l", "d", "!"]
// 使用正则表达式拆分
const str2 = "Hello World! How are you?";
console.log(str2.split(/\s+/)); // ["Hello", "World!", "How", "are", "you?"]
// 指定最大拆分次数
const str3 = "a,b,c,d,e";
console.log(str3.split(",", 3)); // ["a", "b", "c"]
字符串连接方法
concat()
连接两个或多个字符串：
javascript
const str1 = "Hello";
const str2 = "World";
const str3 = "!";
console.log(str1.concat(", ", str2, str3)); // Hello, World!
字符串重复方法
repeat()
ES6引入的repeat()方法，重复字符串指定次数：
javascript
const str = "Hello";
console.log(str.repeat(3)); // HelloHelloHello
字符串填充方法
padStart()
ES8引入的padStart()方法，在字符串开头填充指定字符，直到达到指定长度：
javascript
const str = "5";
console.log(str.padStart(2, "0")); // 05
const str2 = "Hello";
console.log(str2.padStart(10, "*") + ".js"); // *****Hello.js
padEnd()
ES8引入的padEnd()方法，在字符串结尾填充指定字符，直到达到指定长度：
javascript
const str = "5";
console.log(str.padEnd(2, "0")); // 50
const str2 = "file";
console.log(str2.padEnd(8, "-") + ".txt"); // file----.txt
字符串编码方法
encodeURI()
编码URI，但不编码特殊字符（如：! @ # $ & * ( ) = : / ; ? + '）：
javascript
const uri = "https://example.com?name=John Doe&age=30";
console.log(encodeURI(uri)); // https://example.com?name=John%20Doe&age=30
encodeURIComponent()
编码URI的组件，包括特殊字符：
javascript
const uriComponent = "name=John Doe&age=30";
console.log(encodeURIComponent(uriComponent)); // name%3DJohn%20Doe%26age%3D30
decodeURI()
解码由encodeURI()编码的URI：
javascript
const encodedUri = "https://example.com?name=John%20Doe&age=30";
console.log(decodeURI(encodedUri)); // https://example.com?name=John Doe&age=30
decodeURIComponent()
解码由encodeURIComponent()编码的URI组件：
javascript
const encodedUriComponent = "name%3DJohn%20Doe%26age%3D30";
console.log(decodeURIComponent(encodedUriComponent)); // name=John Doe&age=30
字符串的不可变性
在JavaScript中，字符串是不可变的，一旦创建就不能修改：
javascript
let str = "Hello";
str[0] = "h"; // 不会生效
console.log(str); // Hello
// 看起来像是修改了字符串，实际上是创建了新字符串
str = str.toUpperCase();
console.log(str); // HELLO
字符串的常用操作示例
检查字符串是否为空
javascript
const str = " ";
// 检查是否为空字符串
const isEmpty = str === "";
// 检查是否为空或只包含空白字符
const isEmptyOrWhitespace = str.trim() === "";
反转字符串
javascript
const str = "Hello";
const reversed = str.split("").reverse().join("");
console.log(reversed); // olleH
截取文件名和扩展名
javascript
const fileName = "document.pdf";
const lastDotIndex = fileName.lastIndexOf(".");
if (lastDotIndex !== -1) {
const name = fileName.slice(0, lastDotIndex);
const extension = fileName.slice(lastDotIndex + 1);
console.log(name); // document
console.log(extension); // pdf
}
首字母大写
javascript
const str = "hello world";
const capitalized = str.charAt(0).toUpperCase() + str.slice(1);
console.log(capitalized); // Hello world
// 每个单词首字母大写
const words = str.split(" ");
const titleCase = words.map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
console.log(titleCase); // Hello World
字符串的最佳实践
- 使用字符串字面量：优先使用单引号或双引号创建字符串，而不是
new String() - 使用模板字符串：对于包含变量或多行的字符串，使用模板字符串
- 注意字符串的不可变性：不要尝试直接修改字符串的字符
- 选择合适的方法：根据需求选择合适的字符串方法
- 注意编码问题：在处理URL或其他需要编码的字符串时，使用适当的编码方法
继续学习：JavaScript数字
最后更新：2026-02-08