4. 字符串的拓展

一. 字符串的遍历接口
二.模板字符串
三.标签模板
四. 字符串的新增方法
总结

一. 字符串的遍历接口

ES6为字符串添加了遍历接口，使得字符串可以被 for..of 循环遍历

var Str = "hello-world!";
var arr = []
for(let tem of Str){
    arr.push(tem)
}
console.log(arr);
//返回 ["h", "e", "l", "l", "0", "-", "w", "o", "r", "l", "d", "!"]

二.模板字符串

在传统的JavaScript中，输出模板通常这样写（写法比较繁琐）

$("#someID").append(
	'There are <b>' + basket.count + '</b>' + 
    'item in your basket,' + 
    '<em>' + basket.onSale + 
    '</em> are on Sale!'
)

ES6引入了模板字符串来解决这个问题
- 模板字符串是增强版的字符串，使用 ` 来标识
- 它可以当做普通字符串来使用，也可以用来定义多行字符串，或者在字符串中嵌入变量
- 如果使用模板字符串来标识多行字符串，空格和缩进和换行也会保留在输出中
- 可以通过在字符串最后面添加 trim（）方法消除字符串之前和之后的空格和换行
```
let name = 'frisbee';
let age = 18;
console.log(`my name is ${name},
my age is ${age}`)
//返回如下
my name is frisbee,
			my age is 18
```

在模板字符串中嵌入变量

模板字符串中嵌入变量，需要写在 ${} 中

大括号内可以放入任意的JavaScript表达式，可以进行运算，以及对象属性的引用，以及函数的调用

let name = '小七'；
console.log(`my name is ${name}`);		// my name is 小七

console.log(`3 + 5 = ${3 + 5}`)			// 3 + 5 = 8

//函数的调用
function fn(){
    return 'hello 小琪';
}
console.log(`you can speak ${fn()}`)	// you can speak hello 小琪

模板字符串写成函数的返回值
- 执行这个函数，就相当于执行这个字符串了
```
let func = (name) => `hello ${name}`;
func("小七");		//hello 小七
```

三.标签模板

定义：将模板字符串紧跟在一个函数名后面，该函数将被调用来处理这个字符串。这被称为标签模板功能

标签函数会根据模板字符串接收多个参数
第一个参数始终为字符串数组，该数组由模板字符串中所有的字符串组成，由模板中插入的变量进行分割

其它的参数由插入的变量组成，每一个变量值都为标签函数的一个参数

//定义一个方法，该方法用来返回传入的实际参数
function func(){
    for(let i=0;i<arguments.length;i++){
        console.log(arguments[i]);
    }
}
//使用三个不同形式的模板字符串来启动标签模板功能
func`hello world!`
// 	["hello world!"]

func` hello ${name} world! `
//	[" hello ", " world! "]
//	frisbee

func`hello ${name} world! ${age}`	
//	["hello ", " world! ", ""]
//	frisbee
//	18

可以将参数按照原来的顺序拼接回去

//literals存储的是第一个字符串数组，values存储的是所有插入的变量数组
function parseStr(literals,...values){
    let output = '';
    let index;
    for(index=0;index<values.length;index++){
        output += literals[index] + values[index] 
    }
    output += literals[index];
    console.log(output);
    return output;
}

parseStr`hello ${name} world ${age} gogogo`
// hello frisbee world 18 gogogo

四. 字符串的新增方法

判断字符串是否包含某个子字符串
- includes（）：返回布尔值，表示找到了参数字符串
- startsWith（）：返回布尔值，表示参数字符串是否在原字符串头部
- endsWith（）：返回布尔值，表示参数字符串是否在原字符串末尾
```
let str = "hello-world";
str.includes('hello');		//true
str.startsWith('hel');		//true
str.endsWith('world');		//true
```
补全字符串长度
- padStart（）：头部补全，包含两个参数，第一个为补全的最大位数，第二个为用来补全的字符串
- padEnd（）：尾部补全，参数同上
```
var str = '888';
str.padStart(5,'12');		//12888
str.padEnd(5,'00');			//88800
```
消除头部或者尾部的空格
- trimStart（）：消除字符串头部的空格，换行，table，返回新的字符串，不会修改原字符串
- trimEnd（）：消除字符串尾部的空格，换行，table，返回新的字符串，不会修改原字符串
```
var str = `
		hello kitty
	`;
str.trimStart();
// hello kitty 换行
str.trimEnd();
//换行 + table + hello Kitty
```
重复字符串
- repeat（）：重复字符串，该方法包含一个参数，指定重复字符串的次数
```
var str = 'hello';
str.repeat(3);		//hellohellohello
```
匹配字符串
- matchAll（）：该方法返回一个正则表达式在当前字符串的所有匹配
- 示例见后续正则表达式
...

总结

ES6为字符串增加了遍历的接口 for...of,可以遍历字符串中的每一个字符
ES6新增了模板字符串，模板字符串以 ` 开头和结尾，模板字符串创建多行文本的字符串比较方便
- 模板字符串中可通过 ${变量名} 的方式在字符串中插入变量
- 模板字符串输出的时候，会原样输出字符串中的空格和换行
ES6定义了标签模板，即方法名和模板字符串的组合
- 标签模板可用于处理模板字符串
- 标签函数会将模板字符串拆分为两部分，
  - 第一部分是字符串模板中所有字符串组成的字符串数组（遇到插入的变量即分割），作为标签函数的第一个参数。
  - 第二部分是所有插入变量组成的参数，作为标签函数的后续参数
ES6为字符串新增了一些处理方法
- 补全方法：padStart（），padEnd（）
- 子字符串判断方法：includes（），startsWith（），endsWith（）
- 正则表达式匹配方法：matchAll（）
- 重复字符串方法：repeat（）
- 去空格方法：trimStart（），trimEnd（）
- Unicode字符串的处理方法等