深入理解ES6筆記（二）字符串和正則表達(dá)

TANKING 發(fā)布于2019-08-26 12:11 / 3288人閱讀

摘要：主要知識點(diǎn)新增的字符串處理方法模板字面量以及正則表達(dá)式上的改動深入理解筆記目錄字符串字符串是大原始數(shù)據(jù)類型。如果在字符串的結(jié)束部分檢測到指定文本，返回，否則返回。字符串內(nèi)插入反撇號的方式。

主要知識點(diǎn)：新增的字符串處理方法、模板字面量以及正則表達(dá)式上的改動

《深入理解ES6》筆記目錄

字符串

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

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

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

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

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

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

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

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

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

正則表達(dá)式

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

正則表達(dá)的y標(biāo)志:y 標(biāo)志影響正則表達(dá)式搜索時的粘連（ sticky ）屬性，它表示從正則表達(dá)式的 lastIndex 屬性值的位置開始檢索字符串中的匹配字符。如果在該位置沒有匹配成功，那么正則表達(dá)式將停止檢索；

復(fù)制正則表達(dá)式：使用RegExp構(gòu)造器時允許使用第二個參數(shù)，并且讓它覆蓋第一個參數(shù)中的標(biāo)志；
flag屬性：ES6 新增了 flags 屬性用于配合 source 屬性，讓標(biāo)志的獲取變得更容易。

其他新增的方法 字符串中的子串識別：

以前我們經(jīng)常使用indexOf()來檢測字符串中是否包含另外一段字符串。請輸入代碼

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

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

includes(str, index)：如果在字符串中檢測到指定文本，返回true，否則false；如果不傳第二個參數(shù)，默認(rèn)為0。

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

startsWith(str, index)：如果在字符串起始部分檢測到指定文本，返回true，否則返回false。如果不傳第二個參數(shù)，默認(rèn)為0。

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

endsWith(str, index)：如果在字符串的結(jié)束部分檢測到指定文本，返回true，否則返回false。默認(rèn)為字符串末尾開始查找。

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

repeat(number)

接收一個Number類型的數(shù)據(jù)，返回一個重復(fù)N次的新字符串。即使這個字符串是空字符，也你能返回N個空字符的新字符串。

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

模板字面量 基礎(chǔ)語法

以前，我們用單引號或雙引號表示字符串。

let a = "123" //單引號
let b = "123" //雙引號

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

let c = `123` //反撇號

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

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

多行字符串

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

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

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

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

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

在模板字面量插入變量的方法（字符串占位符）

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

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

既然替換位是 JS 表達(dá)式，那么可替換的就不僅僅是簡單的變量名。你可以輕易嵌入計(jì)算、函
數(shù)調(diào)用，等等。例如：

let count = 10,
price = 0.25,
message = `${count} items cost $${(count * price).toFixed(2)}.`;
console.log(message); // "10 items cost $2.50."

云服務(wù)器 GPU云服務(wù)器字符串正則表達(dá)式深入理解系列深入理解linux 深入理解webrtc

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/108186.html

發(fā)表評論

登陸后可評論

0條評論

TANKING

男|高級講師

我要關(guān)注我要私信

TA的文章

剛?cè)腴T數(shù)據(jù)工程師私藏書單(持續(xù)更新)

閱讀 3350·2021-09-06 15:02
CSS 搞怪的 text-decoration

閱讀 2379·2019-08-30 15:48
sass基礎(chǔ)

閱讀 3580·2019-08-29 11:08
JS核心知識點(diǎn)梳理——異步，單線程，運(yùn)行機(jī)制

閱讀 3416·2019-08-26 13:55
如何學(xué)習(xí)一門新語言或框架

閱讀 2593·2019-08-26 13:35
深入理解ES6筆記（二）字符串和正則表達(dá)

閱讀 3289·2019-08-26 12:11
騰訊IVWEB前端工程化工具feflow思考與實(shí)踐

閱讀 2743·2019-08-26 11:48
腳本的加載和執(zhí)行

閱讀 1037·2019-08-26 11:42

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

深入理解ES6筆記（二）字符串和正則表達(dá)

相關(guān)文章

**《深入理解ES6》筆記——字符串和正則表達(dá)式（2）**

前端文檔收集

前端文檔收集

發(fā)表評論

0條評論

TANKING

男|高級講師

TA的文章

剛?cè)腴T數(shù)據(jù)工程師私藏書單(持續(xù)更新)

CSS 搞怪的 text-decoration

sass基礎(chǔ)

JS核心知識點(diǎn)梳理——異步，單線程，運(yùn)行機(jī)制

如何學(xué)習(xí)一門新語言或框架