主题
字符串新增的一些常用方法
更新: 9/4/2025字数: 0 字 时长: 0 分钟
1，新增的一些方法
介绍一些 ES6 字符串对象新增的一些常用方法。
| 方法名 | 描述 |
|---|---|
includes() | 返回布尔值，表示是否找到了参数字符串 |
startsWith() | 返回布尔值，表示参数字符串是否在原字符串的头部 |
endsWith() | 返回布尔值，表示参数字符串是否在原字符串的尾部 |
repeat() | repeat方法返回一个新字符串，表示将原字符串重复n次。 |
padStart() | 用于头部补全，第一个参数是补全生效的最大长度，第二个参数是用来补全的字符串 |
padEnd() | 用于尾部补全，第一个参数是补全生效的最大长度，第二个参数是用来补全的字符串 |
trimStart() | 消除字符串头部的空格 |
trimEnd() | 消除尾部的空格 |
replace() | 只能替换第一个匹配到的字符 |
replaceAll() | 可以一次性替换所有匹配到的字符 |
at() | 返回参数指定索引位置的字符，支持负索引（即倒数的位置） |
2，includes()、startsWith()、endsWith()
传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法；
- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
js
let like = "Eula - Amber";
console.log(like.startsWith("Eula")); // true
console.log(like.endsWith("Amber")); // true
console.log(like.includes("-")); // true这三个方法都支持第二个参数，表示开始搜索的位置。
js
let like2 = "Kaya";
console.log(like2.startsWith("K", 0)); // true
console.log(like2.endsWith("a", 2)); // true 针对前n个字符中查找
console.log(like2.endsWith("a", 4)); // true 针对前n个字符中查找
console.log(like2.includes("y", 2)); // true上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。
3，repeat()
repeat方法返回一个新字符串，表示将原字符串重复n次。
js
console.log("*".repeat(50));
console.log("|==".repeat(18));
console.log("Eula-".repeat(10));
console.log("*".repeat(50));打印如下：
js
**************************************************
|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==
Eula-Eula-Eula-Eula-Eula-Eula-Eula-Eula-Eula-Eula-
**************************************************参数如果是小数，会被取整。
javascript
console.log("xiao".repeat(2.1)); //xiaoxiao
console.log("xiao".repeat(2.9)); //xiaoxiao如果repeat的参数是负数或者Infinity，会报错。
js
console.log("xiao".repeat(Infinity)); //Invalid count value: Infinity
console.log("xiao".repeat(-1)); // Invalid count value: -1但是，如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0。
javascript
console.log("xiao".repeat(-0.9)); // "" 空串如果repeat的参数是字符串，则会先转换成数字。
js
console.log("xiao".repeat("aa")); // "" 空串
console.log("xiao".repeat("3")); // xiaoxiaoxiao4，padStart()、padEnd()
字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
基本用法：
padStart()和padEnd()一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。
js
console.log("x".padStart(2, 0)); // 0x
console.log("x".padStart(5, 0)); // 0000x
console.log("x".padEnd(2, "0")); // x0
console.log("x".padEnd(5, "0")); // x0000如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。
js
"abc".padStart(10, "0123456789");
// '0123456abc'如果省略第二个参数，默认使用空格补全长度。
javascript
"x".padStart(4); // ' x'
"x".padEnd(4); // 'x 'padStart()的常见用途是日期月份前面补0 ；如下案例：
js
let str = new Date();
console.log(new Date().toLocaleDateString()); // 2023/8/2
let month = (str.getMonth() + 1).toString();
console.log(month.padStart(2, "0")); // 085，trimStart()、trimEnd()
新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。
const lik3 = " Eula ";
console.log( lik3.trim()); // 'Eula'
console.log( lik3.trimStart()); // 'Eula '
console.log( lik3.trimEnd()); // ' Eula'上面代码中，trimStart()只消除头部的空格，保留尾部的空格。trimEnd()也是类似行为。
除了空格键，这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。
6，replaceAll()
之前，字符串的实例方法replace()只能替换第一个匹配。
javascript
"aabbcc".replace("b", "_");
// 'aa_bcc'上面例子中，replace()只将第一个b替换成了下划线。
如果要替换所有的匹配，不得不使用正则表达式的g修饰符。
javascript
"aabbcc".replace(/b/g, "_");
// 'aa__cc'正则表达式毕竟不是那么方便和直观，ES6 引入了replaceAll()方法，可以一次性替换所有匹配。
javascript
"aabbcc".replaceAll("b", "_");
// 'aa__cc'它的用法与replace()相同，返回一个新字符串，不会改变原字符串。
javascript
String.prototype.replaceAll(searchValue, replacement);如果searchValue是一个不带有g修饰符的正则表达式，replaceAll()会报错。这一点跟replace()不同。
javascript
// 不报错
"aabbcc".replace(/b/, "_");
// 报错
"aabbcc".replaceAll(/b/, "_");上面例子中，/b/不带有g修饰符，会导致replaceAll()报错。
replaceAll()的第二个参数replacement是一个字符串，表示替换的文本，其中可以使用一些特殊字符串。
$&：匹配的字符串。$`：匹配结果前面的文本。$'：匹配结果后面的文本。$n：匹配成功的第n组内容，n是从 1 开始的自然数。这个参数生效的前提是，第一个参数必须是正则表达式。$$：指代美元符号$。
下面是一些例子。
javascript
// $& 表示匹配的字符串，即`b`本身
// 所以返回结果与原字符串一致
"abbc".replaceAll("b", "$&");
// 'abbc'
// $` 表示匹配结果之前的字符串
// 对于第一个`b`，$` 指代`a`
// 对于第二个`b`，$` 指代`ab`
"abbc".replaceAll("b", "$`");
// 'aaabc'
// $' 表示匹配结果之后的字符串
// 对于第一个`b`，$' 指代`bc`
// 对于第二个`b`，$' 指代`c`
"abbc".replaceAll("b", `$'`);
// 'abccc'
// $1 表示正则表达式的第一个组匹配，指代`ab`
// $2 表示正则表达式的第二个组匹配，指代`bc`
"abbc".replaceAll(/(ab)(bc)/g, "$2$1");
// 'bcab'
// $$ 指代 $
"abc".replaceAll("b", "$$");
// 'a$c'replaceAll()的第二个参数replacement除了为字符串，也可以是一个函数，该函数的返回值将替换掉第一个参数searchValue匹配的文本。
javascript
"aabbcc".replaceAll("b", () => "_");
// 'aa__cc'上面例子中，replaceAll()的第二个参数是一个函数，该函数的返回值会替换掉所有b的匹配。
7，at()
at()方法接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）。
javascript
const str = "Eula";
console.log(str.at(1)); // E
console.log(str.at(1)); // u
console.log(str.at(-1)); // a如果参数位置超出了字符串范围，at()返回undefined
js
console.log(str.at(10)); // undefined