紧跟时代步伐：掌握ES6及后续版本中新增字符串方法的关键要点

引言

随着 JavaScript 的发展，ECMAScript 6（ES6）以及后续版本的推出，为开发者提供了许多强大的新功能和语法糖。其中，对字符串方法的增强是值得关注的一部分。在本文中，我们将深入探讨ES6及其后续版本中新增的一些重要字符串方法，并提供相应的教程和实际应用场景。

应用场景

1. includes()

使用场景： 判断字符串中是否包含指定子字符串，返回布尔值。

const str = "Hello, World!";
console.log(str.includes("World")); // true

2. startsWith()

使用场景： 检查字符串是否以特定的子字符串开头，返回布尔值。

const url = "https://example.com/path";
console.log(url.startsWith("https")); // true

3. endsWith()

使用场景： 确定字符串是否以指定的子字符串结尾，返回布尔值。

const filePath = "/path/to/file.txt";
console.log(filePath.endsWith(".txt")); // true

4. trim()

使用场景： 移除字符串两端的空白字符（包括空格、制表符、换行符等）。常用于清理用户输入或处理文本数据。

const userInput = "   Some text with extra spaces     ";
console.log(userInput.trim()); // "Some text with extra spaces"

5. trimStart() 和 trimEnd()

使用场景： 分别移除字符串开始和结束处的空白字符。在需要仅清理一侧空白时更为精确。

const leadingSpaces = "   Text with leading spaces";
const trailingSpaces = "Text with trailing spaces   ";

console.log(leadingSpaces.trimStart()); // "Text with leading spaces"
console.log(trailingSpaces.trimEnd()); // "Text with trailing spaces"

6. repeat()

使用场景： 将字符串重复指定次数，生成新的字符串。

const base = "ABC";
console.log(base.repeat(3)); // "ABCABCABC"

7. 模板字符串 ( ` 或 ``)

使用场景： 简化多行字符串和字符串插值。允许直接在字符串中嵌入表达式，表达式的值会被计算并插入到字符串中。

const name = "Alice";
const age = 30;

// 多行字符串
const bio = `My name is ${name}, and I am ${age} years old.
I enjoy programming in JavaScript.`;

console.log(bio);

8. padStart() 和 padEnd()

使用场景： 通过在字符串开始或结束处填充指定字符（默认为空格），使字符串达到指定长度。

const number = "123";
console.log(number.padStart(5, "0")); // "00123"
console.log(number.padEnd(7, "-")); // "123-----"

9. codePointAt()

使用场景： 返回指定位置的字符的 Unicode 代码点。支持扩展字符集，如 emoji。

const string = "👋";
console.log(string.codePointAt(0).toString(16)); // "1f44b"

10. fromCodePoint()

使用场景： 从一个或多个 Unicode 代码点创建字符串。支持大于 \uFFFF 的代码点。

const codePoints = [0x1F600, 0x1F308];
const emojiString = String.fromCodePoint(...codePoints);
console.log(emojiString); // "😀🌈"

11. normalize()

使用场景： 将字符串转换为Unicode标准形式（NFC、NFD、NFKC或NFKD），用于规范化字符串比较和处理。

const combined = "á"; // composed form
const decomposed = "á"; // decomposed form

console.log(combined.normalize("NFC") === decomposed.normalize("NFC")); // true

12. matchAll()

使用场景： 返回一个迭代器，遍历字符串中所有匹配正则表达式的捕获组。适用于复杂模式匹配与分析。

const text = "A1, B2, C3, D4";
const regex = /\w(\d)/g;
for (const match of text.matchAll(regex)) {
  console.log(match[1]); // 输出: "1", "2", "3", "4"
}

13. replaceAll()

使用场景： 全局替换字符串中所有匹配正则表达式或指定子字符串的部分，返回新字符串。

const sentence = "The quick brown fox jumps over the lazy dog.";
const newSentence = sentence.replaceAll("fox", "cat");
console.log(newSentence); // "The quick brown cat jumps over the lazy dog."

写在最后

这些方法代表了ES6及后续版本中对字符串对象功能的重要扩展，为开发者提供了更丰富、更便捷的字符串操作手段。随着JavaScript的持续发展，可能会有更多的字符串方法被引入，但上述列表涵盖了ES6以来的核心新增方法。

喜欢的话帮忙点个赞 + 关注吧，将持续更新 JavaScript 相关的文章，还可以关注我的公众号 梁三石FE ，感谢您的关注~