了解 ES7 及 ES8 中的字符串扩展和正则表达式变化

随着前端技术的不断发展，ECMAScript 标准也在不断更新与完善。ES7 及 ES8 引入了许多新的特性，其中字符串扩展和正则表达式变化是比较受关注的部分。

字符串扩展

在 ES6 中，我们已经看到了许多字符串的新特性，例如模板字符串、字符串的解构赋值等。ES7 及 ES8 接着引入了以下字符串扩展功能。

字符串填充

ES7 引入了字符串填充的功能，允许我们在字符串中直接插入变量，类似于模板字符串的功能。但是，字符串填充是通过字符串原型上的函数 padStart 和 padEnd实现的。

• padStart()方法：会在字符串的左侧添加指定数目的字符，直到字符串的长度等于指定的长度为止。

示例代码：

const str = "hello";
const padStartStr = str.padStart(10, "  ");
console.log(padStartStr); // "      hello"

• padEnd()方法：会在字符串的右侧添加指定数目的字符，直到字符串的长度等于指定的长度为止。

示例代码：

const str = "hello";
const padEndStr = str.padEnd(10, "  ");
console.log(padEndStr); // "hello      "

原始字符串

ES6 中已经引入了模板字符串的特性，但是模板字符串中使用反斜杠\来转义字符，使输出的字符串符合语法规则。ES7 及 ES8 中，我们可以使用原始字符串，也就是以反引号(``)引号作为字符串的开始和结束，使其中的反斜杠\不会被转义。

示例代码：

const rawStr = String.raw`C:\Users\YeTian\Desktop\test.txt`;
console.log(rawStr); // "C:\\Users\\YeTian\\Desktop\\test.txt"

Unicode 字符串遍历

ES6 中，我们可以通过for...of循环遍历字符串。在 ES7 及 ES8 中，我们可以通过字符串上的Symbol.iterator方法来实现对 Unicode 字符串的遍历。

示例代码：

const str = "𠮷abc";
for (const char of str) {
  console.log(char);
}

输出结果：

𠮷
a
b
c

正则表达式变化

正则表达式在前端开发中很常见，ES7 及 ES8 引入了一些正则表达式的新功能，使其更加强大和灵活。

正则表达式命名捕获组

命名捕获组是在正则表达式中，对子表达式进行命名，进而捕获与指定名称匹配的子串。ES7 及 ES8 中通过在匹配组内使用(?<name>pattern)的语法来实现命名捕获组。

示例代码：

const str = "2018-02-15";
const reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const result = str.match(reg);
console.log(result.groups.year); // "2018"
console.log(result.groups.month); // "02"
console.log(result.groups.day); // "15"

正则表达式后行断言

在正则表达式的匹配中，我们可以使用正向断言(?=pattern)和负向断言(?!pattern)来限制匹配必须满足某种条件。在 ES6 中，我们还可以使用反向断言来限制匹配前面，也就是说只有在指定匹配的字符串前出现才会匹配成功。ES7 及 ES8 中引入了更加灵活的后行断言，即在指定匹配的字符串后出现才会匹配成功。

示例代码：

const str = "http://www.google.com";
const reg = /(?<=http:\/\/)www\..+(?=\.com)/;
const result = str.match(reg);
console.log(result); // "www.google"

总结

ES7 及 ES8 中字符串扩展和正则表达式变化为我们的前端开发提供了更多的选择和便利。它们的引入说明了 ECMAScript 标准对前端开发的关注和支持，也提醒我们要及时了解和应用这些新的技术特性，以提高我们的开发效率和代码质量。

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