深入探究 JavaScript 中的 String：常用方法和属性全解析(中)

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

三、String的常用方法

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

length 属性是 String 对象的一个属性，用于获取字符串的长度。它是通过在字符串前加上方括号 [] 来访问的，例如：

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

在这个例子中，我们使用 length 属性获取了字符串 str 的长度，并将其输出到控制台。

length 属性返回的字符串长度不包括空格和换行符，只包括字符。例如：

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

在这个例子中，字符串 str 的长度是 13，因为它包含了 12 个字符和 1 个空格。

需要注意的是，length 属性返回的字符串长度是整数，即它总是返回一个整数，即使字符串中包含小数。

charAt()方法：获取字符串中指定位置的字符

charAt() 方法是 String 对象的一个方法，用于获取字符串中指定位置的字符。它是通过在字符串前加上方括号 [] 和一个数字来访问的，例如：

let str = "Hello, world!";
console.log(str.charAt(0)); // 输出 'H'
console.log(str.charAt(7)); // 输出 'w'
console.log(str.charAt(12)); // 输出 '!'

在这个例子中，我们使用 charAt() 方法获取了字符串 str 中指定位置的字符，并将其输出到控制台。

charAt() 方法的参数是一个数字，表示字符串中字符的位置。这个数字从 0 开始，表示第一个字符的位置。例如，charAt(0) 返回字符串中的第一个字符，charAt(1) 返回字符串中的第二个字符，以此类推。

需要注意的是，如果 charAt() 方法的参数超出了字符串的长度，那么它会返回 undefined。例如：

let str = "Hello, world!";
console.log(str.charAt(13)); // 输出 undefined

在这个例子中，我们尝试使用 charAt() 方法获取字符串 str 中位置为 13 的字符，但是由于字符串的长度只有 13，所以我们得到了 undefined。

concat()方法：连接两个或多个字符串

concat() 方法是 String 对象的一个方法，用于连接两个或多个字符串。它是通过在字符串前加上方括号 [] 和一个或多个字符串来访问的，例如：

let str1 = "Hello";
let str2 = "world!";
let str3 = str1.concat(str2);
console.log(str3); // 输出 "Helloworld!"

在这个例子中，我们使用 concat() 方法将两个字符串 str1 和 str2 连接在一起，并将其输出到控制台。

concat() 方法的参数可以是一个或多个字符串，它将这些字符串连接在一起，形成一个新的字符串。例如：

let str1 = "Hello";
let str2 = "world";
let str3 = str1.concat(" ", str2);
console.log(str3); // 输出 "Hello world"

在这个例子中，我们使用 concat() 方法将两个字符串 str1 和 str2 以及一个空格连接在一起，并将其输出到控制台。

需要注意的是，concat() 方法返回一个新的字符串，而不是在原字符串上进行修改。例如：

let str = "Hello";
let str2 = "world";
str = str.concat(str2);
console.log(str); // 输出 "world"
console.log(str2); // 输出 "world"

在这个例子中，我们使用 concat() 方法将两个字符串 str 和 str2 连接在一起，并将结果赋给原字符串 str。但是，输出结果是 str2，而不是 str，因为 concat() 方法返回的是一个新的字符串。

indexOf()和lastIndexOf()方法：查找字符串中字符或子字符串的位置

indexOf() 和 lastIndexOf() 方法是 String 对象的两个方法，用于查找字符串中指定字符或子字符串的位置。它们在字符串中查找指定的字符或子字符串，并返回该字符或子字符串在字符串中首次出现的位置的索引，或者最后一次出现的位置的索引，取决于调用哪个方法。

以下是这两个方法的语法：

str.indexOf(searchElement[, fromIndex])
str.lastIndexOf(searchElement[, fromIndex])

其中，searchElement 是要查找的字符或子字符串，fromIndex 是可选参数，表示从哪个位置开始查找。

下面是这两个方法的详细说明：

1. indexOf() 方法：
   • indexOf() 方法用于查找字符串中指定字符或子字符串首次出现的位置的索引。
   • 如果未找到该字符或子字符串，则返回 -1。
   • 如果指定 fromIndex 参数，则从该索引开始查找。如果该索引大于或等于字符串的长度，则返回 -1。
2. lastIndexOf() 方法：
   • lastIndexOf() 方法用于查找字符串中指定字符或子字符串最后一次出现的位置的索引。
   • 如果未找到该字符或子字符串，则返回 -1。
   • 如果指定 fromIndex 参数，则从该索引开始查找。如果该索引大于或等于字符串的长度，则返回 -1。

下面是一些示例：

let str = "Hello, world!";

// 查找子字符串 "world"
let index = str.indexOf("world");
console.log(index); // 输出 7

let index2 = str.indexOf("world", 6);
console.log(index2); // 输出 7

let index3 = str.indexOf("world", 8);
console.log(index3); // 输出 -1

// 查找字符 "w"
let index = str.indexOf("w");
console.log(index); // 输出 1

let index2 = str.indexOf("w", 2);
console.log(index2); // 输出 1

let index3 = str.indexOf("w", 3);
console.log(index3); // 输出 -1

在这个例子中，我们使用 indexOf() 方法查找字符串 str 中子字符串 “world” 的首次出现位置，并将其输出到控制台。我们还尝试使用 indexOf() 方法从索引 6 开始查找子字符串 “world”，并将其输出到控制台。我们还尝试使用 indexOf() 方法从索引 8 开始查找子字符串 “world”，但是未找到，所以输出 -1。我们还使用 indexOf() 方法查找字符串 str 中字符 “w” 的首次出现位置，并将其输出到控制台。我们还尝试使用 indexOf() 方法从索引 2 开始查找字符 “w”，并将其输出到控制台。我们还尝试使用 indexOf() 方法从索引 3 开始查找字符 “w”，但是未找到，所以输出 -1。

substring()方法：提取字符串的子字符串

substring() 方法是 String 对象的一个方法，用于提取字符串的子字符串。它是通过在字符串前加上方括号 [] 和两个数字来访问的，例如：

let str = "Hello, world!";
let subStr = str.substring(0, 5);
console.log(subStr); // 输出 "Hello"

在这个例子中，我们使用 substring() 方法从字符串 str 中提取从索引 0 开始到索引 5（不包括索引 5）之间的子字符串，并将其输出到控制台。

substring() 方法的第一个参数是子字符串的起始索引，第二个参数是子字符串的结束索引。这两个索引都是可选的，如果省略，则默认为字符串的起始和结束索引。例如：

let str = "Hello, world!";

// 从索引 0 开始到字符串的结束索引
let subStr1 = str.substring(0);
console.log(subStr1); // 输出 "Hello, world!"

// 从字符串的起始索引到索引 5（不包括索引 5）
let subStr2 = str.substring(7);
console.log(subStr2); // 输出 "world!"

在这个例子中，我们使用 substring() 方法从字符串 str 中提取从索引 0 开始到字符串结束的子字符串，并将其输出到控制台。我们还使用 substring() 方法从索引 7 开始到索引 5（不包括索引 5）之间的子字符串，并将其输出到控制台。

需要注意的是，substring() 方法返回的是一个子字符串的引用，而不是一个新字符串。例如：

let str = "Hello, world!";
let subStr = str.substring(0, 5);
str = str.substring(0, 5);
console.log(str); // 输出 "Hello"
console.log(subStr); // 输出 "Hello"

在这个例子中，我们使用 substring() 方法从字符串 str 中提取从索引 0 开始到索引 5（不包括索引 5）之间的子字符串，并将其赋给变量 subStr。然后，我们将变量 str 的起始索引和结束索引都设置为 0 和 5，这意味着我们实际上是在修改 str 变量本身，而不是创建一个新的子字符串。所以，输出结果是相同的。

toLowerCase()和toUpperCase()方法：将字符串转换为小写或大写

toLowerCase() 和 toUpperCase() 方法是 String 对象的两个方法，用于将字符串转换为小写或大写。

以下是这两个方法的语法：

str.toLowerCase()
str.toUpperCase()

其中，str 是需要转换的字符串。

下面是这两个方法的详细说明：

1. toLowerCase() 方法：
   • toLowerCase() 方法将字符串中的所有字符转换为小写形式。
   • 如果字符串已经是最小写形式，则不会进行任何更改。
2. toUpperCase() 方法：
   • toUpperCase() 方法将字符串中的所有字符转换为大写形式。
   • 如果字符串已经是最大写形式，则不会进行任何更改。

下面是一些示例：

let str = "Hello, World!";
let lowerStr = str.toLowerCase();
console.log(lowerStr); // 输出 "hello, world!"

let upperStr = str.toUpperCase();
console.log(upperStr); // 输出 "HELLO, WORLD!"

在这个例子中，我们使用 toLowerCase() 方法将字符串 str 转换为小写形式，并将其输出到控制台。我们还使用 toUpperCase() 方法将字符串 str 转换为大写形式，并将其输出到控制台。

需要注意的是，toLowerCase() 和 toUpperCase() 方法返回的是一个新字符串，而不是在原字符串上进行修改。例如：

let str = "Hello, World!";
let lowerStr = str.toLowerCase();
str = lowerStr;
console.log(str); // 输出 "hello, world!"
console.log(lowerStr); // 输出 "hello, world!"

在这个例子中，我们使用 toLowerCase() 方法将字符串 str 转换为小写形式，并将其赋给变量 lowerStr。然后，我们将变量 str 设置为 lowerStr，这意味着我们实际上是在修改 str 变量本身，而不是创建一个新的字符串。所以，输出结果是相同的。

trim()方法：去除字符串两侧的空格

trim() 方法是 String 对象的一个方法，用于去除字符串两侧的空格。它是通过在字符串前加上方括号 [] 来访问的，例如：

let str = "  Hello, World!  ";
let trimStr = str.trim();
console.log(trimStr); // 输出 "Hello, World!"

在这个例子中，我们使用 trim() 方法去除字符串 str 两侧的空格，并将其输出到控制台。

trim() 方法的语法很简单，只有一个参数，即需要去除空格的字符串。它返回一个新的字符串，其中两侧的空格已被删除。

需要注意的是，trim() 方法不会删除字符串中间的空格，只会删除字符串两侧的空格。例如：

let str = "  Hello, World!  ";
let trimStr = str.trim();
console.log(trimStr); // 输出 "Hello, World!"
console.log(str); // 输出 "  Hello, World!  "

在这个例子中，我们使用 trim() 方法去除字符串 str 两侧的空格，并将其输出到控制台。然后，我们将原始字符串 str 输出到控制台，可以看到它仍然是原样。

replace()方法：替换字符串中的特定子字符串

replace() 方法是 String 对象的一个方法，用于替换字符串中的特定子字符串。它是通过在字符串前加上方括号 [] 和两个参数来访问的，例如：

let str = "Hello, World!";
let newStr = str.replace("World", "Universe");
console.log(newStr); // 输出 "Hello, Universe!"

在这个例子中，我们使用 replace() 方法将字符串 str 中的 “World” 子字符串替换为 “Universe”，并将其输出到控制台。

replace() 方法的第一个参数是要被替换的子字符串，第二个参数是要替换为的新子字符串。这两个参数都是可选的，如果省略，则默认为空字符串。例如：

let str = "Hello, World!";
let newStr = str.replace("World", "Universe");
console.log(newStr); // 输出 "Hello, Universe!"

let newStr2 = str.replace("World", "Universe", 1);
console.log(newStr2); // 输出 "Hello, Universe!"

在这个例子中，我们使用 replace() 方法将字符串 str 中的 “World” 子字符串替换为 “Universe”，并将其输出到控制台。我们还使用 replace() 方法将字符串 str 中的 “World” 子字符串替换为 “Universe”，并限制替换次数为 1，因此只替换了第一次出现的 “World”。

需要注意的是，replace() 方法返回一个新的字符串，而不是在原字符串上进行修改。例如：

let str = "Hello, World!";
let newStr = str.replace("World", "Universe");
str = newStr;
console.log(str); // 输出 "Hello, Universe!"
console.log(newStr); // 输出 "Hello, Universe!"

在这个例子中，我们使用 replace() 方法将字符串 str 中的 “World” 子字符串替换为 “Universe”，并将其赋给变量 newStr。然后，我们将变量 str 设置为 newStr，这意味着我们实际上是在修改 str 变量本身，而不是创建一个新的字符串。所以，输出结果是相同的。