作者：米書林
參考文章：《菜鳥教程》、《 ECMAScript 6 入門》（阮一峰）
字串的識別
ES6 之前判斷字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的識別方法。
1.includes()
includes()：返回布爾值膳沽，判斷是否找到參數(shù)字符串∪觅鳎可接收兩個參數(shù)挑社，第一個是參數(shù)字符串（必填），第二個是搜索起始位置索引（可選）
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.這三個方法只返回布爾值录平，如果需要知道子串的位置，還是得用 indexOf 和 lastIndexOf 缀皱。
2.這三個方法如果傳入了正則表達式而不是字符串，會拋出錯誤动猬。而 indexOf 和 lastIndexOf 這兩個方法啤斗，它們會將正則表達式轉(zhuǎn)換為字符串并搜索它。
3.includes和startsWith的第二個參數(shù)表示從第幾位開始匹配赁咙，endsWith是從字符串指定位置開始钮莲，從后往前匹配
4.includes和startsWith若參數(shù)字符串位于首位，則第二個參數(shù)小于等于0的結(jié)果都會返回true彼水，endsWith若參數(shù)字符串位于最后一位崔拥，則第二個參數(shù)大于等于字符串長度-1返回的結(jié)果都為true
字符串的重復(fù)
1.repeat()
作用：返回新的字符串，表示將字符串重復(fù)指定次數(shù)返回凤覆。
1.基本用法：傳遞一個參數(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 链瓦，會報錯
let str = "h";
let new_str = str.repeat(-2);
let new_str1 = str.repeat(Infinity );
// 報錯：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); // ""
字符串補全
1.padStart()
作用：返回新的字符串慈俯，表示用參數(shù)字符串從頭部（左側(cè)）補全原字符串
2.padEnd()
作用：返回新的字符串，表示用參數(shù)字符串從尾部（右側(cè)）補全原字符串
用法
兩個方法都接受兩個參數(shù)拥峦，第一個參數(shù)是指定生成的字符串的最大長度贴膘，第二個參數(shù)是用來補全的字符串。
1.基礎(chǔ)用法
let str = "abc"
let str1 = str.padStart(5,"de");
let str2 = str.padEnd(5,"de");
// str1 = "deabc"
// str2 = "abcde"
2.省略第二個參數(shù)會用空著填充
let str = "abc"
let str1 = str.padStart(5);
let str2 = str.padEnd(5);
// str1 = " abc"
// str2 = "abc "
3.保證原字符串不動的原則下略号，多余字符串會被省略
a.第一個參數(shù)小于等于原字符串長度刑峡，返回原字符串
let str = "abc"
let str1 = str.padStart(2,"de");
let str2 = str.padEnd(2,"de");
// str1 = "abc"
// str2 = "abc"
b.第一個參數(shù)大于原字符串長度時洋闽，缺幾位就從第二個參數(shù)字符串開頭找?guī)孜唬嫜a字符串不夠則用空格填充
let str = "abc"
let str1 = str.padStart(4,"de");
let str2 = str.padEnd(4,"de");
// str1 = "dabc"
// str2 = "abcd"
用途
1.補全位數(shù)
傳入一個數(shù)字類型數(shù)據(jù)突梦，返回一個補全位數(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"
注意：除了空格鍵撮奏，這兩個方法對字符串頭部（或尾部）的 tab 鍵俏讹、換行符等不可見的空白符號也有效; 瀏覽器還部署了額外的兩個方法，trimLeft()是trimStart()的別名畜吊，trimRight()是trimEnd()的別名泽疆。
matchAll()
作用：返回一個正則表達式在當(dāng)前字符串的所有匹配
模板字符串
傳統(tǒng)js如果需要把變量插入到字符串中，只能通過字符串拼接的方式玲献，使用十分別扭殉疼，ES6引入了模板字符串，幫我們簡化了這些問題捌年。
基本用法
模板字符串相當(dāng)于加強版的字符串瓢娜，用反引號 `,除了作為普通字符串，還可以用來定義多行字符串礼预，還可以在字符串中加入變量和表達式眠砾。
let str1 = 'come
on'; // 報錯：Uncaught SyntaxError: Invalid or unexpected token
let str2 = `come
on`;
// "come
on"
即單引號和雙引號定義的普通字符串不能換行，多個空格也會被合并為一個托酸，若需要進行換行只能通過字符串拼接實現(xiàn)褒颈；反單引號定義的模板字符串保留空格和換行
模板字符串的特性
1.可以換行
模板字符串定義的字符串空格和換行會被保留，我們定義dom結(jié)構(gòu)的時候不必再用字符串拼接
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中我們在字符串中插入變量需要進行字符串拼接励堡，例如我們需要定義一個p標簽來存放張三的自我介紹信息谷丸，代碼大概如下：
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.模板字符串可以嵌入表達式
使用字符串拼接的時候瘩燥，如果需要引入表達式我們需要考慮計算的優(yōu)先級，不然得不到我們計算的結(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ōu)先級服鹅，實際上我們沒有特殊處理的情況下，這段代碼“=”右邊的代碼是從左往右的順序執(zhí)行的百新，執(zhí)行到a+a+b的時候他們受前面執(zhí)行結(jié)果的影響企软，因前面執(zhí)行結(jié)果是字符串，所以這個運算被當(dāng)成了字符串拼接饭望，而不是數(shù)學(xué)運行仗哨，要實現(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歲"
使用模板字符串可以很方便的解決這個問題，代碼大概如下
let a = 12,
b = 20,
let str = `${a}年前我${a}歲斟珊，那$桩卵年后我應(yīng)該是${a + a + b}歲`;
console.log(str);
// "12年前我12歲，那20年后我應(yīng)該是44歲"
使用模板變量我們就不用在一些簡單的計算上面花時間處理優(yōu)先級問題倍宾，因為變量都被放在了${}中。
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);
// 瀏覽器報錯
為什么呢？這是因為瀏覽器解析的時候把前面兩個解析成一對辞州，后面兩個解析成了一對怔锌，所以中間部分不再是字符串了。嵌套使用需要引入一個{},即一般為變量中使用变过，下面的代碼是可行的
const tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
`;
標簽?zāi)０?/h3>
模板字符串緊跟在一個函數(shù)名后面埃元，該函數(shù)將被調(diào)用來處理這個模板字符串。這被稱為“標簽?zāi)０濉惫δ埽╰agged template）媚狰。
標簽?zāi)０迤鋵嵅皇悄０宓荷保呛瘮?shù)調(diào)用的一種特殊形式≌腹拢“標簽”指的就是函數(shù)类嗤，緊跟在后面的模板字符串就是它的參數(shù)糊肠。
alert`你好!`;
// 等價于
alert('你好!');
但是使用console.log打印的結(jié)果卻不是一樣的
console.log`你好`;
// ["你好", raw: Array(1)]
console.log('你好')
// 你好
但是，如果模板字符里面有變量遗锣，就不是簡單的調(diào)用了货裹，而是會將模板字符串先處理成多個參數(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.`;
// 等價于
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}.`;
// 你好**弧圆，你是第**位訪問者
