携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天点击查看活动详情

前言

前面讲了几个比较复杂重要的的概念，今天来一点比较轻松并且重要的的字符串语法扩展，看看这些语法扩展对日常开发有多大用处。

查找（搜索）

.includes()
用于判断字符串是否有包含另一个字符串，

这里可能会经常用到，用一个例子测试一下：

var a  = ' v me 60 crazy KFC'
var b = a.includes("crazy");

var c = a.includes("kfc");
console.log(b)  // true
console.log(c)  // false

我之前都是使用indexOf()，找不到返回-1，找到的话就就是返回首次出现的位置，单纯判断是否包含就有点麻烦了，所以说还是这个好。

还有两种只需要了解一下,在初级开发阶段几乎看不到，但是又非常的方便的语法糖：

startsWith()

返回布尔值，判断参数字符串是否在原字符串的头部。

endsWith()

返回布尔值，判断参数字符串是否在原字符串的尾部。

这两个方法在之前ES5中一般使用正则搞定，但是感觉是杀鸡用宰牛刀了！

循环字符串

直接使用代码展示：

var a = "crazy KFC";
for(let i of a)
{
    console.log(i);
}

效果:

c
r
a
z
y

K
F
C

有点Python 的味道了，在for循环中直接拆分字符串，在ES5中那么就是下面这种方式，非常有用但是目前我的实际场景中用得不多：

var a = "crazy KFC";
for(var i = 0;i<a.length;i++)
{
    console.log(a[i]);
}

复制字符串

.repeat()

返回赋值后的字符串，括号里面是赋值的次数，第一次见这种方法，代码测试展示：

var a = "V me 50 ! ";
b = a.repeat(2)
console.log(b)  //  V me 50 ! V me 50 !

用的比较少，潜意识中一般还是会使用for循环拼接，直接的在Python中可以直接使用*对字符串进行乘法复制。

字符串补全

padStart()

有两个参数，第一个为补全后的字符串最长长度，第二个为补全的字符串。

返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串

padEnd()

有两个参数，第一个为补全后的字符串最长长度，第二个为补全的字符串。

返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。

用的比较少代码实践其中一个：

var a = " kfc";
var b = a.padStart(9, 'carzy')
console.log(b)  // carzy kfc

反引号字符串定义

允许使用反引号定义一个字符串，之前是不允许的，这有点不严谨了，第一次见：

var a  = `Crazy KFC`
console.log(a)  // Crazy KFC

模板字符串

把定的数据的变量和字符串模板拼接成一个新的字符串：

var a  = 'Crazy KFC'

var str =  `${a} V me 50`

console.log(str)  // Crazy KFC V me 50

需要补充两点：

1. 必须使用反引号（`）包裹模板字符串;
1. 模板中的变量项必须通过 $（美元符） + {}（花括号）包裹起来否则会报错。

在之前都是直接使用字符串和变量+号拼接，拼多了就看不清了，这个新特性非常好，学到了。通常会用在国际化处理，转化多国语言的功能上使用。

raw()

板字符串的处理函数, 返回一个原始字符串，不会执行字符串中的反斜杠之类的换行符，类似于Python中的r``方法：

console.log(String.raw`Crazy KFC\n V me 50`); 

console.log(`Crazy KFC\n V me 50`);

效果：

// 使用String.raw方法，字符串没换行：
Crazy KFC\n V me 50

// 未使用String.raw方法，字符串换行了：
Crazy KFC
 V me 50

总结

今天总结了一下ES6新特性中的字符串扩展语法，非常多的方法，有些非常有用我都自己亲自测试了一下，感觉学到了很多，方便了很多，好后悔没有早点学习，哈哈。都比较基础并且非常有用，下篇准备学习一下关于数组只之类的语法扩展。

JavaScript ES6 新特性语法学习（5）- 字符串语法扩展

前言