『JavaScript』深入理解JavaScript字符串的基础操作与内置方法

📣读完这篇文章里你能收获到

• 学习了JavaScript中字符串的基本操作
• 掌握了JavaScript字符串的多种内置方法
• 了解了JavaScript中的模板字符串和插值表达式
• 熟悉了如何在JavaScript中使用正则表达式与字符串方法结合

在JavaScript中，字符串是一个不可变的字符序列，这意味着一旦创建了一个字符串，就不能改变其内容。本文将详细介绍JavaScript中的字符串技术，包括基本操作、方法和一些实用技巧。

一、基本操作

1. 创建字符串

在JavaScript中，可以使用以下方式创建字符串：

let str1 = "Hello, World!";
let str2 = 'This is a string';
let str3 = `Template literal`;

2. 字符串长度

使用length属性可以获得字符串的长度：

let str = "Hello, World!";
console.log(str.length); // 输出：13

3. 字符访问

可以使用方括号[]来访问字符串中的单个字符：

let str = "Hello, World!";
console.log(str[0]); // 输出：H

注意：JavaScript中的字符串索引是从0开始的。

二、字符串方法

JavaScript为字符串提供了一系列内置方法，以下是一些常用的方法：

方法名	描述
charAt(index)	返回指定位置的字符
charCodeAt(index)	返回指定位置的字符的Unicode编码
concat(string2, …, stringN)	连接一个或多个字符串，并返回新的字符串
indexOf(searchValue[, fromIndex])	返回指定子字符串首次出现的索引，未找到则返回-1
lastIndexOf(searchValue[, fromIndex])	返回指定子字符串最后一次出现的索引，未找到则返回-1
includes(searchString[, position])	检查字符串是否包含指定的子字符串，返回布尔值
startsWith(searchString[, position])	检查字符串是否以指定的子字符串开头，返回布尔值
endsWith(searchString[, endPosition])	检查字符串是否以指定的子字符串结尾，返回布尔值
slice(start[, end])	提取字符串的一部分，并返回新的字符串
substring(start[, end])	提取字符串的一部分，并返回新的字符串
toLowerCase()	将字符串转换为小写
toUpperCase()	将字符串转换为大写
trim()	删除字符串两侧的空白字符
trimStart()	删除字符串左侧的空白字符（ES2019）
trimEnd()	删除字符串右侧的空白字符（ES2019）
split(separator[, limit])	使用指定的分隔符将字符串分割成数组
`replace(regexp	substr, newSubstr

以下是一些示例代码：

let str = "Hello, World!";

console.log(str.charAt(0)); // 输出：H
console.log(str.charCodeAt(0)); // 输出：72
console.log(str.concat(" How are you?")); // 输出：Hello, World! How are you?
console.log(str.indexOf("World")); // 输出：7
console.log(str.lastIndexOf("o")); // 输出：8
console.log(str.includes("World")); // 输出：true
console.log(str.startsWith("Hello")); // 输出：true
console.log(str.endsWith("!")); // 输出：true
console.log(str.slice(7, 12)); // 输出：World
console.log(str.substring(7, 12)); // 输出：World
console.log(str.toLowerCase()); // 输出：hello, world!
console.log(str.toUpperCase()); // 输出：HELLO, WORLD!
console.log(str.trim()); // 输出：Hello, World!
console.log(str.split(" ")); // 输出：["Hello,", "World!"]
console.log(str.replace("World", "Everyone")); // 输出：Hello, Everyone!

三、实用技巧

1. 字符串模板

在ES6中引入了模板字符串（Template literals），它使用反引号（`）而不是单引号或双引号来定义字符串。模板字符串可以包含插值表达式，这些表达式会被它们的值替换。

let name = "John";
let greeting = `Hello, ${name}!`; // 输出：Hello, John!

2. 正则表达式

JavaScript中的字符串方法可以与正则表达式一起使用，进行复杂的字符串操作和匹配。

let str = "The quick brown fox jumps over the lazy dog.";

let matches = str.match(/fox/); // 输出：["fox"]
let replaced = str.replace(/the/gi, "that"); // 输出：That quick brown fox jumps over that lazy dog.