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

guqiu 發布于2019-08-20 18:02 / 1454人閱讀

摘要：本章主要講個知識點，字符串正則表達式字符串字符串是大原始數據類型。提供的標準形式，接受一個可選的字符串參數，指明應用某種標準形式。如果在字符串中檢測到指定文本，返回，否則。字符串內插入反撇號的方式。

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

字符串

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

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

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

當Unicode引入擴展字符集之后，16位的字符已經不足以滿足字符串的發展，所以才在ES6中更新了Unicode的支持。

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

UTF-16碼位：ES6強制使用UTF-16字符串編碼。關于UTF-16的解釋請自行百度了解。

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

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

normalize()：提供Unicode的標準形式，接受一個可選的字符串參數，指明應用某種Unicode標準形式。

正則表達式

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

其他新增的方法

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

字符串中的子串識別：

以前我們經常使用indexOf()來檢測字符串中是否包含另外一段字符串。

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

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

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

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

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

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

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

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

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

repeat(number)

這個方法挺有意思的，接收一個Number類型的數據，返回一個重復N次的新字符串。即使這個字符串是空字符，也你能返回N個空字符的新字符串。

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

正則表達式的其他更新

正則表達式y修飾符、正則表達式的復制、flags屬性......

由于這一塊知識沒用過，就不打算去研究實際用途。

模板字面量

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

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

現在，使用模板字面量反撇號``。在實際開發中，這是經常都要用到的方法。

let c = `123` //反撇號

在字符串中使用反撇號，只需要加上轉義符。

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

在多行字符串的使用價值：

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

如果不使用模板字面量，實現多行字符串，你可能會使用換行符。

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

使用模板字面量，就可以非常簡單的實現需求。

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

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

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

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

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

模板字面量的終極用法
tag是一個方法，方法名你可以任意命名，這種寫法被稱作標簽模板。

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

總結

本章講到了ES6中新增的Unicode方法，但是對于不需要做國際化處理的同學，這個功能就不會用到，需要關注的新增的字符串匹配的3個方法，以及模板字面量的使用。這2個知識點非常非常常用！

=> 返回文章目錄

云服務器 GPU云服務器字符串正則表達式深入理解系列深入理解linux 深入理解webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84023.html

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

摘要：主要知識點新增的字符串處理方法模板字面量以及正則表達式上的改動深入理解筆記目錄字符串字符串是大原始數據類型。如果在字符串的結束部分檢測到指定文本，返回，否則返回。字符串內插入反撇號的方式。主要知識點：新增的字符串處理方法、模板字面量以及正則表達式上的改動showImg(https://segmentfault.com/img/bVbfWak?w=861&h=622); 《深入理解E...

TANKING 2019-08-26 12:11 評論0 收藏0
《深入理解ES6》筆記——導讀

摘要：最近買了深入理解的書籍來看，為什么學習這么久還要買這本書呢主要是看到核心團隊成員及的創造者為本書做了序，作為一個粉絲，還是挺看好這本書能給我帶來一個新的升華，而且本書的作者也非常厲害。使用ES6開發已經有1年多了，以前看的是阮一峰老師的ES6教程，也看過MDN文檔的ES6語法介紹。最近買了《深入理解ES6》的書籍來看，為什么學習ES6這么久還要買這本書呢？主要是看到Daniel A...

Godtoy 2019-08-20 18:01 評論0 收藏0
正則表達式

摘要：最全正則表達式總結驗證號手機號中文郵編身份證地址等是正則表達式的縮寫，作用是對字符串執行模式匹配。學習目標了解正則表達式語法在中使用正則表達式在中使 JS高級技巧本篇是看的《JS高級程序設計》第23章《高級技巧》做的讀書分享。本篇按照書里的思路根據自己的理解和經驗，進行擴展延伸，同時指出書里的一些問題。將會討論安全的類型檢測、惰性載入函數、凍結對象、定時器等話題。1. 安全的類型檢測...

yibinnn 2019-08-21 17:57 評論0 收藏0