摘要：本章主要講個(gè)知識(shí)點(diǎn)，字符串正則表達(dá)式字符串字符串是大原始數(shù)據(jù)類(lèi)型。提供的標(biāo)準(zhǔn)形式，接受一個(gè)可選的字符串參數(shù)，指明應(yīng)用某種標(biāo)準(zhǔn)形式。如果在字符串中檢測(cè)到指定文本，返回，否則。字符串內(nèi)插入反撇號(hào)的方式。

相比較于第一章變量的聲明，這一章的內(nèi)容有了一點(diǎn)深度提升，但還不至于很難理解。本章主要講2個(gè)知識(shí)點(diǎn)，字符串、正則表達(dá)式

字符串（String）是JavaScript6大原始數(shù)據(jù)類(lèi)型。其他幾個(gè)分別是Boolean、Null、Undefined、Number、Symbol（es6新增）。

字符串類(lèi)型在前端開(kāi)發(fā)者，是使用最頻繁的類(lèi)型之一，網(wǎng)站上可見(jiàn)的各種文案，幾乎都是字符串類(lèi)型的數(shù)據(jù)。我們經(jīng)常需要使用的操作無(wú)非是這么幾點(diǎn)：讀取字符串、轉(zhuǎn)換字符串、清空字符串、拼接字符串、截取字符串。

在ES5中，字符串類(lèi)型已經(jīng)有了非常豐富的應(yīng)用能力，那么，在ES6中，ECMA的專(zhuān)家們對(duì)字符串做了什么更新呢？

當(dāng)Unicode引入擴(kuò)展字符集之后，16位的字符已經(jīng)不足以滿(mǎn)足字符串的發(fā)展，所以才在ES6中更新了Unicode的支持。

我們看看ES6字符串新增的方法

UTF-16碼位：ES6強(qiáng)制使用UTF-16字符串編碼。關(guān)于UTF-16的解釋請(qǐng)自行百度了解。

codePointAt()：
該方法支持UTF-16，接受編碼單元的位置而非字符串位置作為參數(shù)，返回與字符串中給定位置對(duì)應(yīng)的碼位，即一個(gè)整數(shù)值。

String.fromCodePoiont()：作用與codePointAt相反，檢索字符串中某個(gè)字符的碼位，也可以根據(jù)指定的碼位生成一個(gè)字符。

normalize()：提供Unicode的標(biāo)準(zhǔn)形式，接受一個(gè)可選的字符串參數(shù)，指明應(yīng)用某種Unicode標(biāo)準(zhǔn)形式。

正則表達(dá)式u修飾符：
當(dāng)給正則表達(dá)式添加u字符時(shí)，它就從編碼單元操作模式切換為字符模式。

上面提到的字符串和正則的新增方法只有在國(guó)際化的時(shí)候才用的到，我想，國(guó)內(nèi)的很多網(wǎng)站還是不需要考慮國(guó)際化的問(wèn)題，看不懂就先丟掉。下面講到的新增的方法是實(shí)際開(kāi)發(fā)中需求比較頻繁的方法。

字符串中的子串識(shí)別：

以前我們經(jīng)常使用indexOf()來(lái)檢測(cè)字符串中是否包含另外一段字符串。

let t = "abcdefg"
if(t.indexOf("cde") > -1) {
  console.log(2)
}
//輸出2，因?yàn)閠字符串中包含cde字符串。

在ES6中，新增了3個(gè)新方法。每個(gè)方法都接收2個(gè)參數(shù)，需要檢測(cè)的子字符串，以及開(kāi)始匹配的索引位置。

includes(str, index)：如果在字符串中檢測(cè)到指定文本，返回true，否則false。

let t = "abcdefg"
if(t.includes("cde")) {
  console.log(2)
}
//true

startsWith(str, index)：如果在字符串起始部分檢測(cè)到指定文本，返回true，否則返回false。

let t = "abcdefg"
if(t.startsWith("ab")) {
  console.log(2)
}
//true

endsWith(str, index)：如果在字符串的結(jié)束部分檢測(cè)到指定文本，返回true，否則返回false。

let t = "abcdefg"
if(t.endsWith("fg")) {
  console.log(2)
}
//true

如果你只是需要匹配字符串中是否包含某子字符串，那么推薦使用新增的方法，如果需要找到匹配字符串的位置，使用indexOf()。

repeat(number)

這個(gè)方法挺有意思的，接收一個(gè)Number類(lèi)型的數(shù)據(jù)，返回一個(gè)重復(fù)N次的新字符串。即使這個(gè)字符串是空字符，也你能返回N個(gè)空字符的新字符串。

console.log("ba".repeat(3)) //bababa

正則表達(dá)式y(tǒng)修飾符、正則表達(dá)式的復(fù)制、flags屬性......

由于這一塊知識(shí)沒(méi)用過(guò)，就不打算去研究實(shí)際用途。

以前，我們用單引號(hào)或雙引號(hào)表示字符串。

let a = "123" //單引號(hào)
let b = "123" //雙引號(hào)

現(xiàn)在，使用模板字面量反撇號(hào)``。在實(shí)際開(kāi)發(fā)中，這是經(jīng)常都要用到的方法。

let c = `123` //反撇號(hào)

在字符串中使用反撇號(hào)，只需要加上轉(zhuǎn)義符。

let d = `12`3` //字符串內(nèi)插入反撇號(hào)的方式。

在多行字符串的使用價(jià)值：

模板字面量為解決多行字符串的一系列問(wèn)題提供了一個(gè)非常好的機(jī)制。

如果不使用模板字面量，實(shí)現(xiàn)多行字符串，你可能會(huì)使用換行符。

let a = "123
456"
console.log(a) 
// 123
// 456

使用模板字面量，就可以非常簡(jiǎn)單的實(shí)現(xiàn)需求。

let a = `123
456
`
console.log(a)
// 123
// 456

在模板字面量插入變量的方法。

我們不再需要使用 +（加號(hào)）來(lái)向字符串插入變量，而是使用${params}直接插入你需要添加到字符串的位置。

let t = "haha"
let a = `123${t}456`
console.log(a) //123haha456

這種方式也叫作字符串占位符。占位符支持互相嵌套模板字面量，強(qiáng)大吧。有了它，我們終于可以?huà)仐?+ 拼接字符串的惡心做法了。

模板字面量的終極用法
tag是一個(gè)方法，方法名你可以任意命名，這種寫(xiě)法被稱(chēng)作標(biāo)簽?zāi)０濉?/p>

function tag(literals, ...substitutions) {
    //literals是數(shù)組，第一個(gè)位置是""，第二個(gè)位置是占位符之間的字符串，在本例中是haha
    //substitutions是字符串中的模板字面量，可能多個(gè)
    
    //函數(shù)最終返回字符串
}
let a = 4
let t = tag`${a} haha`
console.log(t) //4 haha

本章講到了ES6中新增的Unicode方法，但是對(duì)于不需要做國(guó)際化處理的同學(xué)，這個(gè)功能就不會(huì)用到，需要關(guān)注的新增的字符串匹配的3個(gè)方法，以及模板字面量的使用。這2個(gè)知識(shí)點(diǎn)非常非常常用！

=> 返回文章目錄