ECMAScript 2017（ES8）中处理字符串的新方法

ECMAScript 2017（ES8）是一种JavaScript语言的新版本，其中包含了许多新的功能和语言特性。在这个版本中，我们看到了一些非常有用的字符串处理方法，这些方法可以让我们更轻松地操作和处理字符串。在本文中，我们将深入了解这些新的字符串处理方法，并提供一些有用的示例代码。

1. 字符串填充方法 - padStart() 和 padEnd()

ES8中的新方法 padStart() 和 padEnd() 可以让我们将字符串填充到指定的长度。这对于将字符串对齐或格式化输出非常有用。

padStart() 方法用于在字符串的开头填充指定的字符串，以达到所需的长度。例如，我们可以将字符串 "hello" 填充到长度为 10 的字符串：" hello"。

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

padEnd() 方法也非常类似，只不过它在字符串的末尾填充指定的字符串。例如，我们可以将字符串 "hello" 填充到长度为 10 的字符串："hello "。

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

2. 字符串修剪方法 - trimStart() 和 trimEnd()

ES8中新增了 trimStart() 和 trimEnd() 方法，这两个方法可以分别用于删除字符串的开头和结尾的空格（或其他指定字符）。

trimStart() 方法用于从字符串的开头删除指定的字符，直到遇到第一个非指定字符。例如，我们可以将字符串 " hello" 中的前导空格删除。

const str = "   hello";
const newStr = str.trimStart();
console.log(newStr); // "hello"

trimEnd() 方法同样在字符串的末尾删除指定的字符。例如，我们可以将字符串 "hello " 中的末尾空格删除。

const str = "hello   ";
const newStr = str.trimEnd();
console.log(newStr); // "hello"

3. 字符串占位符 - tagged template literals

tagged template literals 是ES6引入的一项特性，ES8中也增加了一些可选的实现细节。使用 tagged template literals，我们可以将函数与模板字符串结合使用，以产生更加灵活的字符串生成方式，可以用于很多场景，比如字符串的国际化、防止SQL注入等。

要使用 tagged template literals，我们需要将一个函数的名称放在模板字符串的前面，并将该字符串包含在一个函数调用中。这个函数将处理该字符串，并且可以生成一个新的字符串作为返回值。

例如，以下代码演示了如何将一个字符串中的所有空格替换为指定的字符，并将其输出到控制台：

function tag(strings, ...values) {
  return strings.join('|').replace(/\s+/g, "+");
}

const str = "hello world";
const newStr = tag`${str}`;
console.log(newStr); // "hello|world"

在这个例子中，我们使用了一个名为 tag 的函数，这个函数将模板字符串中的所有空格替换为 + 符号。我们然后使用模板字符串和 tag() 函数生成一个新的字符串，并将其输出到控制台。

结论

ECMAScript 2017（ES8）中的字符串处理方法为前端开发人员提供了一些非常有用的工具，可以使字符串处理更加方便和灵活。本文介绍了该版本中的 padStart()、padEnd() 、trimStart()、trimEnd()、tagged template literals等方法，这些方法可以让我们轻松处理和操作字符串。

除了本文中提到的方法之外，ES8中还包含了许多其他有用的功能和特性，如果您是一名前端开发人员，我们建议您继续学习和熟练掌握这些功能，以充分利用ECMAScript 2017（ES8）的新功能。

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