作者：米書林
參考文章：《菜鳥教程》、《 ECMAScript 6 入門》（阮一峰）
字串的識別
ES6 之前判斷字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的識別方法。
1.includes()
includes()：返回布爾值，判斷是否找到參數(shù)字符串?？山邮諆蓚€(gè)參數(shù)，第一個(gè)是參數(shù)字符串（必填），第二個(gè)是搜索起始位置索引（可選）
let str = "abc";
str.includes("b"); // true
str.includes(""); // true
str.includes(); // false
str.includes("b",2); // false
2.startsWith()
startsWith():返回布爾值，判斷原字符串是否以參數(shù)字符串開頭。
let str = "abcde";
str.startsWith("a"); // true
str.startsWith("a",2); // false
str.startsWith(""); // true
str.startsWith(); // false
2.endsWith()
endsWith():返回布爾值，判斷原字符串是否以參數(shù)字符串結(jié)尾。
let str = "abcde";
str.endsWith("e"); // true
str.endsWith("e",2); // true
str.endsWith(""); // true
str.endsWith(); // false
注意：
1.這三個(gè)方法只返回布爾值，如果需要知道子串的位置，還是得用 indexOf 和 lastIndexOf 。
2.這三個(gè)方法如果傳入了正則表達(dá)式而不是字符串，會拋出錯(cuò)誤。而 indexOf 和 lastIndexOf 這兩個(gè)方法，它們會將正則表達(dá)式轉(zhuǎn)換為字符串并搜索它。
3.includes和startsWith的第二個(gè)參數(shù)表示從第幾位開始匹配，endsWith是從字符串指定位置開始，從后往前匹配
4.includes和startsWith若參數(shù)字符串位于首位，則第二個(gè)參數(shù)小于等于0的結(jié)果都會返回true，endsWith若參數(shù)字符串位于最后一位，則第二個(gè)參數(shù)大于等于字符串長度-1返回的結(jié)果都為true
字符串的重復(fù)
1.repeat()
作用：返回新的字符串，表示將字符串重復(fù)指定次數(shù)返回。
1.基本用法：傳遞一個(gè)參數(shù)表示字符串重復(fù)的次數(shù)
let str = "h";
let new_str = str.repeat(3);
// str = "h"
// new_str = "hhh"
2.參數(shù)為小數(shù)：向下取整
let str = "h";
let new_str = str.repeat(4.9);
// str = "h"
// new_str = ""
3.參數(shù)范圍為（-1<x<1）,重復(fù)后為空串
let str = "h";
let new_str = str.repeat(-0.9);
let new_str1 = str.repeat(0.9);
// str = "h"
// new_str = ""
// new_str1 = ""
4.參數(shù)小于等于-1或者 Infinity ，會報(bào)錯(cuò)
let str = "h";
let new_str = str.repeat(-2);
let new_str1 = str.repeat(Infinity );
// 報(bào)錯(cuò)：Uncaught RangeError: Invalid count value
5.參數(shù)為NaN,重復(fù)后為空串
let str = "h";
let new_str = str.repeat(NaN);
// new_str = ""
6.參數(shù)為其他（undefined,null,[],""," "），則會先用Number()函數(shù)處理為number類型，然后再遵從以上規(guī)則
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); // ""
字符串補(bǔ)全
1.padStart()
作用：返回新的字符串，表示用參數(shù)字符串從頭部（左側(cè)）補(bǔ)全原字符串
2.padEnd()
作用：返回新的字符串，表示用參數(shù)字符串從尾部（右側(cè)）補(bǔ)全原字符串
用法
兩個(gè)方法都接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是指定生成的字符串的最大長度，第二個(gè)參數(shù)是用來補(bǔ)全的字符串。
1.基礎(chǔ)用法
let str = "abc"
let str1 = str.padStart(5,"de");
let str2 = str.padEnd(5,"de");
// str1 = "deabc"
// str2 = "abcde"
2.省略第二個(gè)參數(shù)會用空著填充
let str = "abc"
let str1 = str.padStart(5);
let str2 = str.padEnd(5);
// str1 = " abc"
// str2 = "abc "
3.保證原字符串不動的原則下，多余字符串會被省略
a.第一個(gè)參數(shù)小于等于原字符串長度，返回原字符串
let str = "abc"
let str1 = str.padStart(2,"de");
let str2 = str.padEnd(2,"de");
// str1 = "abc"
// str2 = "abc"
b.第一個(gè)參數(shù)大于原字符串長度時(shí)，缺幾位就從第二個(gè)參數(shù)字符串開頭找?guī)孜?，替補(bǔ)字符串不夠則用空格填充
let str = "abc"
let str1 = str.padStart(4,"de");
let str2 = str.padEnd(4,"de");
// str1 = "dabc"
// str2 = "abcd"
用途
1.補(bǔ)全位數(shù)
傳入一個(gè)數(shù)字類型數(shù)據(jù)，返回一個(gè)補(bǔ)全位數(shù)后的字符串用于顯示
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"
注意：除了空格鍵，這兩個(gè)方法對字符串頭部（或尾部）的 tab 鍵、換行符等不可見的空白符號也有效; 瀏覽器還部署了額外的兩個(gè)方法，trimLeft()是trimStart()的別名，trimRight()是trimEnd()的別名。
matchAll()
作用：返回一個(gè)正則表達(dá)式在當(dāng)前字符串的所有匹配
模板字符串
傳統(tǒng)js如果需要把變量插入到字符串中，只能通過字符串拼接的方式，使用十分別扭，ES6引入了模板字符串，幫我們簡化了這些問題。
基本用法
模板字符串相當(dāng)于加強(qiáng)版的字符串，用反引號 `,除了作為普通字符串，還可以用來定義多行字符串，還可以在字符串中加入變量和表達(dá)式。
let str1 = 'come
on'; // 報(bào)錯(cuò)：Uncaught SyntaxError: Invalid or unexpected token
let str2 = `come
on`;
// "come
on"
即單引號和雙引號定義的普通字符串不能換行，多個(gè)空格也會被合并為一個(gè)，若需要進(jìn)行換行只能通過字符串拼接實(shí)現(xiàn)；反單引號定義的模板字符串保留空格和換行
模板字符串的特性
1.可以換行
模板字符串定義的字符串空格和換行會被保留，我們定義dom結(jié)構(gòu)的時(shí)候不必再用字符串拼接
let innerHtml = `<ul>
<li>menu</li>
<li>mine</li>
</ul>
`;
console.log(innerHtml);
// 代碼執(zhí)行的結(jié)果如下
<ul>
<li>menu</li>
<li>mine</li>
</ul
2.模板字符串可以插入變量
傳統(tǒng)js中我們在字符串中插入變量需要進(jìn)行字符串拼接，例如我們需要定義一個(gè)p標(biāo)簽來存放張三的自我介紹信息，代碼大概如下：
let name = "張三",
age = 23,
addr = "廣東";
let person_info = '<p>大家好，我的名字叫'+
name + '今年' + age + '歲，來自' +
addr + '省</p>'
document.write(person_info);
// 代碼執(zhí)行后會在頁面寫入下面的語句
// 大家好，我的名字叫張三今年23歲，來自廣東省
從上面代碼可以看出，我們使用了很多字符串拼接符號“+”，而且拼接后DOM結(jié)構(gòu)也不便于閱讀，我們應(yīng)用ES6可以在不改變DOM結(jié)構(gòu)的情況下插入變量，ES6中上述代碼大概如下：
let name = "張三",
age = 23,
addr = "廣東";
let person_info = `<p>大家好，我的名字叫${name}今年${age}歲，來自${addr}省</p>`
document.write(person_info);
// 代碼執(zhí)行后會在頁面寫入下面的語句
// 大家好，我的名字叫張三今年23歲，來自廣東省
它們執(zhí)行的結(jié)果都是一樣的，但是用字符串拼接就像說話總是被打斷一樣，而使用模板字符串我們就能將一句話很連貫的說出來了。
2.模板字符串可以嵌入表達(dá)式
使用字符串拼接的時(shí)候，如果需要引入表達(dá)式我們需要考慮計(jì)算的優(yōu)先級，不然得不到我們計(jì)算的結(jié)果，例如
let a = 12,
b = 20,
let str = a + '年前我' + a + '歲，那' + b + '年后我應(yīng)該是' + a + a + b + '歲';
console.log(str);
// "12年前我12歲，那20年后我應(yīng)該是121220歲"
上述代碼執(zhí)行的結(jié)果顯然不是我們想要的，因?yàn)槲覀儧]有考慮優(yōu)先級，實(shí)際上我們沒有特殊處理的情況下，這段代碼“=”右邊的代碼是從左往右的順序執(zhí)行的，執(zhí)行到a+a+b的時(shí)候他們受前面執(zhí)行結(jié)果的影響，因前面執(zhí)行結(jié)果是字符串，所以這個(gè)運(yùn)算被當(dāng)成了字符串拼接，而不是數(shù)學(xué)運(yùn)行，要實(shí)現(xiàn)我們的效果我們需要提升他們的優(yōu)先級，代碼如下：
let a = 12,
b = 20,
let str = a + '年前我' + a + '歲，那' + b + '年后我應(yīng)該是' + (a + a + b) + '歲';
console.log(str);
// "12年前我12歲，那20年后我應(yīng)該是44歲"
使用模板字符串可以很方便的解決這個(gè)問題，代碼大概如下
let a = 12,
b = 20,
let str = `${a}年前我${a}歲，那$年后我應(yīng)該是${a + a + b}歲`;
console.log(str);
// "12年前我12歲，那20年后我應(yīng)該是44歲"
使用模板變量我們就不用在一些簡單的計(jì)算上面花時(shí)間處理優(yōu)先級問題，因?yàn)樽兞慷急环旁诹?code>${}中。
3.模板字符串中可以調(diào)用函數(shù)
function getNowDate(){
let nowDate = new Date();
return nowDate = `${nowDate.getFullYear()}年${nowDate.getMonth()}月${nowDate.getDate()}日`
}
let text = `當(dāng)前日期是：${getNowDate()}`
console.log(text);
// 當(dāng)前日期是：2019年9月22日
4.模板字符串可以嵌套
模板字符串還可以嵌套使用，例如
let str = `你好，`我是嵌套使用的模板字符串`1`
console.log(str);
// 瀏覽器報(bào)錯(cuò)
為什么呢？這是因?yàn)闉g覽器解析的時(shí)候把前面兩個(gè)解析成一對，后面兩個(gè)解析成了一對，所以中間部分不再是字符串了。嵌套使用需要引入一個(gè){},即一般為變量中使用，下面的代碼是可行的
const tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
`;
標(biāo)簽?zāi)０?/h3>
模板字符串緊跟在一個(gè)函數(shù)名后面，該函數(shù)將被調(diào)用來處理這個(gè)模板字符串。這被稱為“標(biāo)簽?zāi)０濉惫δ埽╰agged template）。
標(biāo)簽?zāi)０迤鋵?shí)不是模板，而是函數(shù)調(diào)用的一種特殊形式。“標(biāo)簽”指的就是函數(shù)，緊跟在后面的模板字符串就是它的參數(shù)。
alert`你好!`;
// 等價(jià)于
alert('你好!');
但是使用console.log打印的結(jié)果卻不是一樣的
console.log`你好`;
// ["你好", raw: Array(1)]
console.log('你好')
// 你好
但是，如果模板字符里面有變量，就不是簡單的調(diào)用了，而是會將模板字符串先處理成多個(gè)參數(shù)，再調(diào)用函數(shù)。
let a = 5;
let b = 10;
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
還原參數(shù)字符串
function f(stringArr,...values){
let result = "";
for(let i=0;i<stringArr.length;i++){
result += stringArr[i];
if(values[i]){
result += values[i];
}
}
return result;
}
let name = 'Mike';
let age = 27;
f`My Name is ${name},I am ${age+1} years old next year.`;
// "My Name is Mike,I am 28 years old next year."
f`My Name is ${name},I am ${age+1} years old next year.`;
// 等價(jià)于
f(['My Name is',',I am ',' years old next year.'],'Mike',28);
過濾HTML字符串
function f(stringArr,...values){
let result = "";
for(let i=0;i<stringArr.length;i++){
result += stringArr[i];
if(values[i]){
result += String(values[i]).replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
}
}
return result;
}
name = '<Amy&MIke>';
f`<p>Hi, ${name}.I would like send you some message.</p>`;
// <p>Hi, <Amy&MIke>.I would like send you some message.</p>
國際化處理（轉(zhuǎn)化多國語言）
i18n`Hello ${name}, you are visitor number ${visitorNumber}.`;
// 你好**，你是第**位訪問者
