es6 字符串String的扩展(实例讲解)

ES6的字符串扩展：模板字符串与标签模板的使用

随着ES6的推出，JavaScript的字符串处理能力得到了极大的增强，特别是模板字符串和标签模板这两个新特性的引入，极大地简化了字符串的拼接和处理。本文将通过实例讲解这两个特性的使用方法和注意事项。

一、模板字符串

传统的字符串拼接方式，例如：

```javascript

let name = "Jacky";

let occupation = "doctor";

let str = "He is " + name + ", he is a " + occupation;

```

在ES6中，我们可以使用模板字符串进行更简洁的拼接：

```javascript

let name = "Jacky";

let occupation = "doctor";

let str = `He is ${name}, he is a ${occupation}`;

```

```javascript

let str = `write once,

run anywhere`;

```

二、标签模板

标签模板是ES6中另一个强大的特性。它的基本语法是：标签函数名后跟一个模板字符串。例如：

```javascript

var name = "张三";

var height = 1.8;

tagFn`他叫${name}，身高${height}米。`;

```

这里的`tagFn`是一个自定义的函数，它接受两个参数：一个数组和其他变量。数组中的元素是模板字符串中除去${}的部分，而后面的变量则是${}中的值。例如：

```javascript

function tagFn(arr, ...values) {

console.log(arr); // 输出 ["他叫", "，身高", "米。"]

console.log(values); // 输出 ["张三", 1.8]

}

```

标签模板常用于实现一些特殊功能，如过滤用户输入、多语言转换等。通过自定义标签函数，我们可以对模板字符串进行更灵活的处理。

ES6中的新String函数：掌握未来的字符串操作

在JavaScript的ES6版本中，String对象新增了一系列实用的函数，让字符串操作更为便捷和直观。让我们逐一这些强大的新工具。

repeat()函数

想象一下，你需要将一个字符串重复多次而不改变原字符串。这正是repeat()函数的用途。只需指定重复次数，即可轻松实现。例如：

```javascript

let name1 = "王汉炎"; //目标字符串

let name2 = name1.repeat(3); //将name1重复三次

console.log(name1); //输出：王汉炎（原字符串不变）

console.log(name2); //输出：王汉炎王汉炎王汉炎（新字符串已生成）

```

includes()函数

无需再使用传统的indexOf()函数来判断字符串中是否包含某个子串了。includes()函数能更直观地告诉我们答案。它会返回true（包含）或false（不包含）。还可以指定开始搜索的位置。例如：

```javascript

let name = "王汉炎"; //目标字符串

console.log(namecludes('炎')); //输出：true

console.log(namecludes('web')); //输出：false

console.log(namecludes('王', 1)); //从第2个字符开始搜索，输出：false

```

startsWith()和endsWith()函数

这两个函数分别用于判断字符串是否以某个子串开头或结尾。同样，它们也支持指定开始搜索的位置。例如：

```javascript

let name = "王汉炎"; //目标字符串

console.log(name.startsWith('王')); //输出：true

console.log(name.endsWith('炎')); //输出：true

```

当涉及到特殊字符时，如需要4个字节存储的字符，JavaScript的String对象提供了codePointAt()函数。它能正确处理这些字符，返回其对应的码点值。这对于处理Unicode字符非常有用。例如：

```javascript

let str = "