Javascript教程

Appearance

JavaScript 字符串 ​

字符串的概念 ​

字符串是 JavaScript 中的一种原始数据类型，用于表示文本数据。字符串由零个或多个字符组成，用单引号、双引号或反引号包围。

字符串的创建 ​

1. 字符串字面量 ​

javascript
let singleQuote = 'Hello, World!'; // 单引号
let doubleQuote = "Hello, World!"; // 双引号
let backtick = `Hello, World!`; // 反引号（模板字符串）

2. String 构造函数 ​

javascript
let str1 = new String('Hello, World!');
let str2 = String('Hello, World!');

console.log(typeof str1); // 输出: object
console.log(typeof str2); // 输出: string

字符串的长度 ​

使用 length 属性获取字符串的长度：

javascript
let str = 'Hello, World!';
console.log(str.length); // 输出: 13

字符串的访问 ​

1. 索引访问 ​

使用索引访问字符串中的单个字符（索引从 0 开始）：

javascript
let str = 'Hello';
console.log(str[0]); // 输出: H
console.log(str[1]); // 输出: e
console.log(str[4]); // 输出: o
console.log(str[5]); // 输出: undefined（索引超出范围）

2. charAt() 方法 ​

使用 charAt() 方法获取指定索引位置的字符：

javascript
let str = 'Hello';
console.log(str.charAt(0)); // 输出: H
console.log(str.charAt(4)); // 输出: o
console.log(str.charAt(5)); // 输出: ""（空字符串，索引超出范围）

3. charCodeAt() 方法 ​

使用 charCodeAt() 方法获取指定索引位置字符的 Unicode 编码：

javascript
let str = 'Hello';
console.log(str.charCodeAt(0)); // 输出: 72（H 的 Unicode 编码）
console.log(str.charCodeAt(4)); // 输出: 111（o 的 Unicode 编码）

4. codePointAt() 方法 ​

使用 codePointAt() 方法获取指定索引位置字符的 Unicode 代码点：

javascript
let str = '😀';
console.log(str.codePointAt(0)); // 输出: 128512（表情符号的 Unicode 代码点）

字符串的操作 ​

1. 字符串拼接 ​

javascript
let str1 = 'Hello';
let str2 = 'World';
let result1 = str1 + ' ' + str2; // 输出: Hello World
let result2 = str1.concat(' ', str2); // 输出: Hello World

2. 字符串截取 ​

substring() 方法 ​

javascript
let str = 'Hello, World!';
console.log(str.substring(0, 5)); // 输出: Hello（从索引 0 开始，到索引 5 结束，不包含索引 5）
console.log(str.substring(7)); // 输出: World!（从索引 7 开始，到字符串结束）

slice() 方法 ​

javascript
let str = 'Hello, World!';
console.log(str.slice(0, 5)); // 输出: Hello
console.log(str.slice(7)); // 输出: World!
console.log(str.slice(-6)); // 输出: World!（从字符串末尾开始计算索引）
console.log(str.slice(0, -7)); // 输出: Hello（从索引 0 开始，到倒数第 7 个字符结束）

substr() 方法（已废弃） ​

javascript
let str = 'Hello, World!';
console.log(str.substr(0, 5)); // 输出: Hello（从索引 0 开始，截取 5 个字符）
console.log(str.substr(7)); // 输出: World!（从索引 7 开始，到字符串结束）

3. 字符串查找 ​

indexOf() 方法 ​

javascript
let str = 'Hello, World!';
console.log(str.indexOf('World')); // 输出: 7（返回第一次出现的索引）
console.log(str.indexOf('o')); // 输出: 4
console.log(str.indexOf('x')); // 输出: -1（未找到）

lastIndexOf() 方法 ​

javascript
let str = 'Hello, World!';
console.log(str.lastIndexOf('o')); // 输出: 8（返回最后一次出现的索引）

includes() 方法 ​

javascript
let str = 'Hello, World!';
console.log(str.includes('World')); // 输出: true
console.log(str.includes('x')); // 输出: false

startsWith() 方法 ​

javascript
let str = 'Hello, World!';
console.log(str.startsWith('Hello')); // 输出: true
console.log(str.startsWith('World')); // 输出: false

endsWith() 方法 ​

javascript
let str = 'Hello, World!';
console.log(str.endsWith('World!')); // 输出: true
console.log(str.endsWith('Hello')); // 输出: false

4. 字符串替换 ​

replace() 方法 ​

javascript
let str = 'Hello, World!';
console.log(str.replace('World', 'JavaScript')); // 输出: Hello, JavaScript!（只替换第一次出现）
console.log(str.replace(/o/g, '0')); // 输出: Hell0, W0rld!（使用正则表达式替换所有出现）

replaceAll() 方法 ​

javascript
let str = 'Hello, World!';
console.log(str.replaceAll('o', '0')); // 输出: Hell0, W0rld!（替换所有出现）

5. 字符串大小写转换 ​

toUpperCase() 方法 ​

javascript
let str = 'Hello, World!';
console.log(str.toUpperCase()); // 输出: HELLO, WORLD!

toLowerCase() 方法 ​

javascript
let str = 'Hello, World!';
console.log(str.toLowerCase()); // 输出: hello, world!

toLocaleUpperCase() 方法 ​

javascript
let str = 'Hello, World!';
console.log(str.toLocaleUpperCase()); // 输出: HELLO, WORLD!（考虑区域设置）

toLocaleLowerCase() 方法 ​

javascript
let str = 'Hello, World!';
console.log(str.toLocaleLowerCase()); // 输出: hello, world!（考虑区域设置）

6. 字符串去除空格 ​

trim() 方法 ​

javascript
let str = '   Hello, World!   ';
console.log(str.trim()); // 输出: Hello, World!（去除首尾空格）

trimStart() 方法 ​

javascript
let str = '   Hello, World!   ';
console.log(str.trimStart()); // 输出: Hello, World!   （去除开头空格）

trimEnd() 方法 ​

javascript
let str = '   Hello, World!   ';
console.log(str.trimEnd()); // 输出:    Hello, World!（去除结尾空格）

7. 字符串分割 ​

使用 split() 方法将字符串分割为数组：

javascript
let str = 'Hello, World!';
console.log(str.split(',')); // 输出: ["Hello", " World!"]
console.log(str.split('')); // 输出: ["H", "e", "l", "l", "o", ",", " ", "W", "o", "r", "l", "d", "!"]
console.log(str.split(' ', 1)); // 输出: ["Hello,"]（限制分割数量）

8. 字符串重复 ​

使用 repeat() 方法重复字符串：

javascript
let str = 'Hello';
console.log(str.repeat(3)); // 输出: HelloHelloHello

9. 字符串填充 ​

padStart() 方法 ​

javascript
let str = '5';
console.log(str.padStart(3, '0')); // 输出: 005（在开头填充）

padEnd() 方法 ​

javascript
let str = '5';
console.log(str.padEnd(3, '0')); // 输出: 500（在结尾填充）

字符串的比较 ​

1. 比较运算符 ​

javascript
console.log('a' < 'b'); // 输出: true
console.log('z' > 'a'); // 输出: true
console.log('apple' < 'banana'); // 输出: true
console.log('10' < '2'); // 输出: true（字典序比较，'1' < '2'）

2. localeCompare() 方法 ​

javascript
console.log('apple'.localeCompare('banana')); // 输出: -1（apple 在 banana 之前）
console.log('banana'.localeCompare('apple')); // 输出: 1（banana 在 apple 之后）
console.log('apple'.localeCompare('apple')); // 输出: 0（相等）

字符串的转换 ​

1. 转换为数字 ​

javascript
let str = '123';
console.log(Number(str)); // 输出: 123
console.log(parseInt(str)); // 输出: 123
console.log(parseFloat(str)); // 输出: 123

let str2 = '123.45';
console.log(parseFloat(str2)); // 输出: 123.45

2. 转换为布尔值 ​

javascript
let str = 'Hello';
console.log(Boolean(str)); // 输出: true

let emptyStr = '';
console.log(Boolean(emptyStr)); // 输出: false

3. 转换为数组 ​

javascript
let str = 'Hello';
console.log(Array.from(str)); // 输出: ["H", "e", "l", "l", "o"]
console.log([...str]); // 输出: ["H", "e", "l", "l", "o"]

字符串的不可变性 ​

JavaScript 中的字符串是不可变的，这意味着一旦创建，就不能修改：

javascript
let str = 'Hello';
str[0] = 'h'; // 尝试修改字符串
console.log(str); // 输出: Hello（修改失败）

// 正确的修改方式是创建一个新字符串
let newStr = 'h' + str.substring(1);
console.log(newStr); // 输出: hello

字符串的最佳实践 ​

1. 使用模板字符串 ​

使用模板字符串（反引号）代替字符串拼接，使代码更清晰：

javascript
// 好的做法
let name = 'John';
let age = 30;
let message = `Hello, ${name}! You are ${age} years old.`;

// 不好的做法
let message = 'Hello, ' + name + '! You are ' + age + ' years old.';

2. 避免使用 eval() ​

避免使用 eval() 解析字符串中的 JavaScript 代码，因为它可能导致安全问题：

javascript
// 不好的做法
let code = 'console.log("Hello");';
eval(code);

// 好的做法
// 直接编写代码
console.log('Hello');

3. 合理使用字符串方法 ​

选择合适的字符串方法来完成任务，例如：

  • 使用 includes() 检查字符串是否包含子字符串
  • 使用 startsWith() 和 endsWith() 检查字符串的开头和结尾
  • 使用 trim() 去除字符串首尾的空格

4. 注意字符串的长度 ​

在处理用户输入时，应该检查字符串的长度，以避免过长的输入导致问题。

5. 转义特殊字符 ​

在字符串中使用特殊字符时，需要使用反斜杠 \ 进行转义：

javascript
let str = 'He said, "Hello!"';
let path = 'C:\\Users\\John\\Documents';

小结 ​

字符串是 JavaScript 中常用的数据类型之一，用于表示文本数据。JavaScript 提供了丰富的字符串方法，用于操作和处理字符串。理解字符串的特性和方法，是学习 JavaScript 的基础。在实际开发中，应该根据具体需求选择合适的字符串方法，并遵循最佳实践。

Copyright © 2025-2026 京公网安备 11010102000001号 京ICP备2024078128号-1