ES6基础语法之字符串扩展

在ES6中，字符串扩展得到了加强，新增了许多特性，例如新增了模板字符串、字符串的迭代器和标签模板等。下面我们将对这些特性进行详细讲解。

模板字符串

模板字符串是ES6中新增的语法，可以通过反引号（`）来表示一个字符串，其中可以包含嵌入的表达式，且这些表达式将被计算后输出。

示例1：

const name = "world";
console.log(`hello ${name}`);

输出结果为：

hello world

示例2：

const a = 5;
const b = 10;
console.log(`Fifteen is ${a + b}`);

输出结果为：

Fifteen is 15

字符串的迭代器

在ES6中，字符串可以被视为一组字符序列，因此我们可以使用迭代器的方式来处理字符串。

示例：使用 for...of 循环遍历字符串。

const str = "hello";
for(let char of str) {
  console.log(char);
}

输出结果为：

h
e
l
l
o

标签模板

标签模板是一种特殊的语法，它可以将一个模板字符串的各个部分分离出来，在其中插入自己的逻辑，最终输出一个新的字符串。

示例：

function template(strings, ...values) {
  console.log(strings);
  console.log(values);
}
const name = "world";
template`hello ${name}`;

输出结果为：

[ 'hello ', '' ]
[ 'world' ]

上面的例子中，strings 参数为一个数组，数组元素为模板字符串中 ${} 之前的字符串和最后一个字符串的集合。values 参数为一个数组，数组元素为 ${} 中的表达式的集合。我们可以在这里进行字符串的处理，最终输出需要的字符串。

其他字符串扩展相关特性

除了上述的特性之外，ES6中还新增了一些小的特性，例如字符串的重复、首尾空白符的去除等。下面是一些示例：

示例1：字符串重复

console.log("abc".repeat(3)); // 输出 "abcabcabc"

示例2：字符串的头部和尾部空白符的去除

const str = "    hello world    ";
console.log(str.trimStart()); // 输出 "hello world    "
console.log(str.trimEnd()); // 输出 "    hello world"

通过学习以上内容，我们对ES6中字符串扩展的基础语法已经有了了解。