如何使用 ES10 中新增的 String 的方法，规范化字符串操作-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，字符串是一个非常常见的数据类型。在处理字符串时，我们经常需要对字符串进行处理或操作，如查找、替换、复制等。在 ES10 中，String 类型新增了一些方法，可以帮助我们更方便地操作字符串。

String.trimStart() 和 String.trimEnd()

String.trim() 方法可以去除字符串两端的空格或指定的字符，但是在 ES10 中，新增了 String.trimStart() 和 String.trimEnd() 方法，分别用于去除字符串开头和结尾的空格或指定的字符。

这两个方法非常方便，例如，我们可以使用 String.trimStart() 方法去除表格中每行的开头空格，如下所示：

-- -------------------- ---- -------
----- ----- - -
    ----   ---
    -----  --
    ---    --
--

----- ---- - -------------------------

--- ---- --- -- ----- -
    -----------------------------
-

输出结果为：

Name   Age
Alice  25
Bob    30

注意，在使用这两个方法时，需要判断浏览器是否支持。如果不支持，可以使用 String.replace() 方法模拟。

String.padStart() 和 String.padEnd()

String.padStart() 和 String.padEnd() 方法可以在字符串的开头或结尾添加指定的字符，直到字符串达到指定的长度为止。这个方法在生成固定长度的字符串时非常有用。

例如，我们可以使用 String.padStart() 方法生成固定长度的编号，如下所示：

function generateId(id) {
    return String(id).padStart(6, '0');
}

console.log(generateId(1)); // 000001
console.log(generateId(123)); // 000123
console.log(generateId(12345)); // 012345

String.trimStart() 和 String.trimEnd()

这两个方法非常方便，例如，我们可以使用 String.trimStart() 方法去除表格中每行的开头空格，如下所示：

-- -------------------- ---- -------
----- ----- - -
    ----   ---
    -----  --
    ---    --
--

----- ---- - -------------------------

--- ---- --- -- ----- -
    -----------------------------
-

输出结果为：

Name   Age
Alice  25
Bob    30

注意，在使用这两个方法时，需要判断浏览器是否支持。如果不支持，可以使用 String.replace() 方法模拟。

String.matchAll()

String.matchAll() 方法可以返回一个迭代器，用于匹配全局正则表达式，并返回所有匹配结果的详细信息。

例如，我们可以使用 String.matchAll() 方法根据正则表达式返回所有 URL 中的查询参数，如下所示：

const url = 'https://example.com/?name=Alice&age=25&gender=female';

for (let match of url.matchAll(/([^?=&]+)(=([^&]*))/g)) {
    console.log(match);
}

输出结果为：

["name=Alice", "name", "=", "Alice", index: 22, input: "https://example.com/?name=Alice&age=25&gender=female", groups: undefined]
["age=25", "age", "=", "25", index: 30, input: "https://example.com/?name=Alice&age=25&gender=female", groups: undefined]
["gender=female", "gender", "=", "female", index: 35, input: "https://example.com/?name=Alice&age=25&gender=female", groups: undefined]

注意，在使用这个方法时，需要判断浏览器是否支持。如果不支持，可以使用 RegExp.prototype.exec() 方法模拟。

总结

在 ES10 中，String 类型新增了一些方法，可以帮助我们更方便地操作字符串。这些方法包括 String.trimStart()、String.trimEnd()、String.padStart()、String.padEnd() 和 String.matchAll()。这些方法可以提高字符串操作的效率和规范性，值得我们在实际开发中使用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6461f379968c7c53b0348639