ES6字符串

作者：米书林
参考文章：《菜鸟教程》、《 ECMAScript 6 入门》（阮一峰）

字串的识别

ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法。

1.includes()

includes()：返回布尔值，判断是否找到参数字符串。可接收两个参数，第一个是参数字符串（必填），第二个是搜索起始位置索引（可选）

let str = "abc";
str.includes("b");  // true
str.includes("");  // true
str.includes();  // false
str.includes("b",2);  // false

2.startsWith()

startsWith():返回布尔值，判断原字符串是否以参数字符串开头。

let str = "abcde";
str.startsWith("a");  // true
str.startsWith("a",2);   // false
str.startsWith("");  // true
str.startsWith();  // false

2.endsWith()

endsWith():返回布尔值，判断原字符串是否以参数字符串结尾。

let str = "abcde";
str.endsWith("e");  // true
str.endsWith("e",2);   // true
str.endsWith("");  // true
str.endsWith();  // false

注意：
1.这三个方法只返回布尔值，如果需要知道子串的位置，还是得用 indexOf 和 lastIndexOf 。
2.这三个方法如果传入了正则表达式而不是字符串，会抛出错误。而 indexOf 和 lastIndexOf 这两个方法，它们会将正则表达式转换为字符串并搜索它。
3.includes和startsWith的第二个参数表示从第几位开始匹配，endsWith是从字符串指定位置开始，从后往前匹配
4.includes和startsWith若参数字符串位于首位，则第二个参数小于等于0的结果都会返回true，endsWith若参数字符串位于最后一位，则第二个参数大于等于字符串长度-1返回的结果都为true

字符串的重复

1.repeat()

作用：返回新的字符串，表示将字符串重复指定次数返回。
1.基本用法：传递一个参数表示字符串重复的次数

let str = "h";
let new_str = str.repeat(3);
// str = "h" 
// new_str = "hhh"

2.参数为小数：向下取整

let str = "h";
let new_str = str.repeat(4.9);
// str = "h" 
// new_str = ""

3.参数范围为（-1

let str = "h";
let new_str = str.repeat(-0.9);
let new_str1 = str.repeat(0.9);
// str = "h" 
// new_str = ""
// new_str1 = ""

4.参数小于等于-1或者 Infinity ，会报错

let str = "h";
let new_str = str.repeat(-2);
let new_str1 = str.repeat(Infinity );
// 报错：Uncaught RangeError: Invalid count value

5.参数为NaN,重复后为空串

let str = "h";
let new_str = str.repeat(NaN);
// new_str = ""

6.参数为其他（undefined,null,[],""," "），则会先用Number()函数处理为number类型，然后再遵从以上规则

let str = "h";
let new_str1 = str.repeat(undefined);  // ""
let new_str2 = str.repeat(null);  // ""
let new_str3 = str.repeat([]);  // ''''
let new_str4 = str.repeat([1]); // "h"
let new_str5 = str.repeat([1,2]); // ""
let new_str6 = str.repeat({});  // ""
let new_str7 = str.repeat("");  // ""
let new_str8 = str.repeat("abs");  // ""
let new_str9 = str.repeat("3");  // "hhh"
let new_str10 = str.repeat(true);  // "h"
let new_str11 = str.repeat(false);  // ""

字符串补全

1.padStart()

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

2.padEnd()

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

用法

两个方法都接受两个参数，第一个参数是指定生成的字符串的最大长度，第二个参数是用来补全的字符串。
1.基础用法

let str = "abc"
let str1 = str.padStart(5,"de");
let str2 = str.padEnd(5,"de");
// str1 = "deabc"
// str2 = "abcde"

2.省略第二个参数会用空着填充

let str = "abc"
let str1 = str.padStart(5);
let str2 = str.padEnd(5);
// str1 = "  abc"
// str2 = "abc  "

3.保证原字符串不动的原则下，多余字符串会被省略
a.第一个参数小于等于原字符串长度，返回原字符串

let str = "abc"
let str1 = str.padStart(2,"de");
let str2 = str.padEnd(2,"de");
// str1 = "abc"
// str2 = "abc"

b.第一个参数大于原字符串长度时，缺几位就从第二个参数字符串开头找几位，替补字符串不够则用空格填充

let str = "abc"
let str1 = str.padStart(4,"de");
let str2 = str.padEnd(4,"de");
// str1 = "dabc"
// str2 = "abcd"

用途

1.补全位数
传入一个数字类型数据，返回一个补全位数后的字符串用于显示

function padNum(num){
  let str = num.toString()
  return str = str.padStart(10,"0");
}
let result = padNum(12);
// result = "0000000012"

2.添加文件名后缀
给定一串不带后缀的jpg文件，我们可以用padEnd给气添加上后缀

let old_file_name = "demo"
let new_file_name = old_file_name.padEnd(old_file_name.length+4,".jpg");
console.log(new_file_name);  // demo.jpg

去除字符串首尾空格

1.trimStart()

作用：消除字符串头部的空格，返回新字符串，不会修改原始字符串

2.trimEnd()

作用：消除尾部的空格，返回新字符串，不会修改原始字符串

let str = '  abc  ';
str.trim() // "abc"
str.trimStart() // "abc  "
str.trimEnd() // "  abc"

注意：除了空格键，这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效; 浏览器还部署了额外的两个方法，trimLeft()是trimStart()的别名，trimRight()是trimEnd()的别名。

matchAll()

作用：返回一个正则表达式在当前字符串的所有匹配

模板字符串

传统js如果需要把变量插入到字符串中，只能通过字符串拼接的方式，使用十分别扭，ES6引入了模板字符串，帮我们简化了这些问题。

基本用法

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

let str1 = 'come 
on';   // 报错：Uncaught SyntaxError: Invalid or unexpected token
let str2 = `come 
on`; 
// "come
on"

即单引号和双引号定义的普通字符串不能换行，多个空格也会被合并为一个，若需要进行换行只能通过字符串拼接实现；反单引号定义的模板字符串保留空格和换行

模板字符串的特性

1.可以换行
模板字符串定义的字符串空格和换行会被保留，我们定义dom结构的时候不必再用字符串拼接

let innerHtml = `

  
menu
  
mine

`;
console.log(innerHtml);

// 代码执行的结果如下

  
menu
  
mine

2.模板字符串可以插入变量
传统js中我们在字符串中插入变量需要进行字符串拼接，例如我们需要定义一个p标签来存放张三的自我介绍信息，代码大概如下：

let name = "张三",
    age = 23,
    addr = "广东";
let person_info = '
大家好，我的名字叫'+ 
name + '今年' + age + '岁，来自' +
addr + '省
'
document.write(person_info);

// 代码执行后会在页面写入下面的语句
// 大家好，我的名字叫张三今年23岁，来自广东省

从上面代码可以看出，我们使用了很多字符串拼接符号“+”，而且拼接后DOM结构也不便于阅读，我们应用ES6可以在不改变DOM结构的情况下插入变量，ES6中上述代码大概如下：

let name = "张三",
    age = 23,
    addr = "广东";
let person_info = `
大家好，我的名字叫${name}今年${age}岁，来自${addr}省
`
document.write(person_info);

// 代码执行后会在页面写入下面的语句
// 大家好，我的名字叫张三今年23岁，来自广东省

它们执行的结果都是一样的，但是用字符串拼接就像说话总是被打断一样，而使用模板字符串我们就能将一句话很连贯的说出来了。

2.模板字符串可以嵌入表达式
使用字符串拼接的时候，如果需要引入表达式我们需要考虑计算的优先级，不然得不到我们计算的结果，例如

let a = 12,
    b = 20,
let str = a + '年前我' + a + '岁，那' + b + '年后我应该是' + a + a + b + '岁';
console.log(str);
// "12年前我12岁，那20年后我应该是121220岁"

上述代码执行的结果显然不是我们想要的，因为我们没有考虑优先级，实际上我们没有特殊处理的情况下，这段代码“=”右边的代码是从左往右的顺序执行的，执行到a+a+b的时候他们受前面执行结果的影响，因前面执行结果是字符串，所以这个运算被当成了字符串拼接，而不是数学运行，要实现我们的效果我们需要提升他们的优先级，代码如下：

let a = 12,
    b = 20,
let str = a + '年前我' + a + '岁，那' + b + '年后我应该是' + (a + a + b) + '岁';
console.log(str);
// "12年前我12岁，那20年后我应该是44岁"

使用模板字符串可以很方便的解决这个问题，代码大概如下

let a = 12,
    b = 20,
let str = `${a}年前我${a}岁，那${b}年后我应该是${a + a + b}岁`;
console.log(str);
// "12年前我12岁，那20年后我应该是44岁"

使用模板变量我们就不用在一些简单的计算上面花时间处理优先级问题，因为变量都被放在了${}中。

3.模板字符串中可以调用函数

function getNowDate(){
  let nowDate = new Date();
  return nowDate = `${nowDate.getFullYear()}年${nowDate.getMonth()}月${nowDate.getDate()}日`
}
let text = `当前日期是：${getNowDate()}`
console.log(text);
// 当前日期是：2019年9月22日

4.模板字符串可以嵌套
模板字符串还可以嵌套使用，例如

let str = `你好，`我是嵌套使用的模板字符串`1`
console.log(str);
// 浏览器报错

为什么呢？这是因为浏览器解析的时候把前面两个解析成一对，后面两个解析成了一对，所以中间部分不再是字符串了。嵌套使用需要引入一个{},即一般为变量中使用，下面的代码是可行的

const tmpl = addrs => `
  
  ${addrs.map(addr => `
    
  `).join('')}
  
${addr.first}
    
${addr.last}
`;

标签模板

模板字符串紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。
标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

alert`你好!`;
// 等价于
alert('你好!');

但是使用console.log打印的结果却不是一样的

console.log`你好`;
// ["你好", raw: Array(1)]
console.log('你好')
// 你好

但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。

let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

还原参数字符串

function f(stringArr,...values){
 let result = "";
 for(let i=0;i

过滤HTML字符串

function f(stringArr,...values){
 let result = "";
 for(let i=0;i/g, ">");
    }
 }
 return result;
}
name = '';
f`
Hi, ${name}.I would like send you some message.
`;
// 
Hi, <Amy&MIke>.I would like send you some message.

国际化处理（转化多国语言）

i18n`Hello ${name}, you are visitor number ${visitorNumber}.`;  
// 你好**，你是第**位访问者