关于ES6字符串的扩展详解

一、字面量增强

ES6的字符串新增了两个语法糖：`和`。

使用`可以很方便地定义多行字符串，例如：

const str = `这是一个
多行字符串
`;

这样可以在一行中定义多行字符串，避免了手动添加换行符。

使用`可以很方便地嵌入变量或表达式，例如：

const name = 'Bob';
const str = `你好，${name}`;

这样可以在字符串中直接使用变量或表达式，避免了使用字符串拼接或函数调用的麻烦。

二、模板函数

ES6提供了模板函数`String.raw`，可以原样输出字符串中的转义字符。

例如：

const str = String.raw`aaa\nbbb`;
console.log(str); // 输出 aaa\nbbb

这里的`String.raw`函数可以将字符串中的转义字符“\n”原样输出。

三、新增方法

ES6也新增了一些字符串方法，如下所示。

（一）重复字符串.repeat()

重复字符串可以使用`repeat`方法：

const str = 'a'.repeat(3);
console.log(str); // 输出 aaa

（二）增加填充字符串.padStart()和.padEnd()

为字符串增加填充字符可以使用`padStart`方法和`padEnd`方法：

const str = 'ab';
console.log(str.padStart(5, 'c')); // 输出 cccab
console.log(str.padEnd(5, 'c')); // 输出 abccc

第一个参数指定输出字符串的长度，第二个参数指定填充的字符。

四、示例说明

（一）使用字面量增强来定义HTML模板

由于字符串字面量增强可以方便地嵌入变量或表达式，因此在使用JavaScript书写HTML模板时，可以使用字面量增强简化代码。

例如：

const name = 'Bob';
const age = 18;
const tmpl = `
    <div>
        <p>姓名：${name}</p>
        <p>年龄：${age}</p>
    </div>
`;
const container = document.getElementById('container');
container.innerHTML = tmpl;

这里使用了`name`和`age`两个变量来构建一个HTML模板，并将模板渲染到页面的`div`元素中。

（二）使用字符串.repeat()来构建分隔线

在一些文本界面中，可能需要使用分隔线来区分不同的内容。可以使用`repeat`方法来构建分隔线，例如：

console.log('-'.repeat(10)); // 输出 ----------

这里使用字符串`-`来构建一个长度为10的分隔线。