国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

深入理解ES6之《字符串及正則》

liaosilzu2007 / 1557人閱讀

摘要:字符串中的字符有兩種,一種是由一個編碼單元位表示的字符,另一種是由兩個編碼單元位表示的輔助平面字符在中,所有字符串的操作都是基于位編碼單元接受編碼單元的位置而非字符位置作為參數,返回與字符串中給定位置對應的碼位,即一個整數值也就是說對于字符

字符串中的字符有兩種,一種是由一個編碼單元16位表示的BMP字符,另一種是由兩個編碼單元32位表示的輔助平面字符
在ES5中,所有字符串的操作都是基于16位編碼單元

codePointAt

codePointAt 接受編碼單元的位置而非字符位置作為參數,返回與字符串中給定位置對應的碼位,即一個整數值
也就是說對于BMP字符集中的字符,codePointAt方法的返回值與charCodeAt方法的相同,而對于非BMP字符集來說返回值則不同

let txt="?a"
console.log(txt.charCodeAt(0))//55362  --僅僅返回位置0處的第一個編碼單元
console.log(txt.charCodeAt(1))//57271
console.log(txt.charCodeAt(2))//97

console.log(txt.codePointAt(0))//134071  --返回完整的碼位,即使這個碼位包含多個編碼單元
console.log(txt.codePointAt(1))//57271
console.log(txt.codePointAt(2))//97

檢測字符占用編碼單元數量

function is32Bit(c) {
  return c.codePointAt(0)>0xFFFF
}
console.log(is32Bit("?"))//true
console.log(is32Bit("a"))//false
String.fromCodePoint

codePoint方法在字符串中檢索一個字符的碼位,也可以使用String.fromCodePoint方法根據指定的碼位生成一個字符

可以將String.fromCodePoint看成更完整版本的String.fromCharCode,因為對于BMP中的所有字符,這倆方法執行結果相同,只有傳遞非BMP的碼位作用參數時,二者執行結果才有可能不同

normalize

在對不同字符進行排序或比較時,會存在一種可能它們是等效的
1、規范的等效是指無論從哪個角度來看,兩個序列的碼位都是沒有區別的
2、兩個互相兼容的碼位序列看起來不同,但是在特定情況下可以被交換使用
切記:在對比字符串前一定要把它們標準化為同一種形式

let values = ["test", "demo", "compare", "sort"]
let normalized = values.map(function (txt) {
  return txt.normalize()
})
normalized.sort(function (first, second) {
  if (first < second) return -1
  else if (first === second) return 0
  else return 1
})

或者上述代碼也可以這樣

let values = ["test", "demo", "compare", "sort"]
values.sort(function (first, second) {
  // let firstNormalized = first.normalize(),
  //   secondNormalized = second.normalize();  //可以寫成這種形式也可以寫成如下這種形式
  let firstNormalized = first.normalize("NFC"),
  secondNormalized = second.normalize("NFC");
  if (firstNormalized < secondNormalized) return -1
  else if (firstNormalized === secondNormalized) return 0
  else return 1
})

Unicode標準化形式有如下幾種

正則u修飾符

當一個正則表達式使用u修飾符時,它就從編碼單元操作切換為字符模式

let txt = "?"
console.log(txt.length)//2
console.log(/^.$/.test(txt))//false
console.log(/^.$/u.test(txt))//true

通過上述特性,可檢測字符串真正長度

function codePointLength(txt) {
  let result = txt.match(/[sS]/gu)
  return result ? result.length : 0
}
console.log(codePointLength("abc"))//3
console.log(codePointLength("?ab"))//3
console.log("?ab".length)//4

檢測引擎是否支持u修飾符

function hasRegExpU(params) {
  try {
    var pattern = new RegExp(".", "u")
    return true
  } catch (ex) {
    return false
  }
}

如果你的代碼仍然需要運行在老式的JS引擎中,使用修飾符時切記使用RegExp構造函數,這樣可以避免發生語法錯誤,并且你可以有選擇的檢測和使用u修飾符而不會造成系統異常終止

字符串中的子串識別

includes 在字符串中檢測是否包含指定文本
startsWith 在字符串的起始部分是否包含指定文本
endsWith 在字符串的結束部分是否包含指定文本
以上三個方法都接受兩個參數:1、要搜索的文本 2、可選 開始搜索的索引值,如果指定的第二個參數則會比這個索引值的位置開始匹配,endsWith則從字符串長度減法這個索引值的位置開始匹配

let msg = "Hello world!"
console.log(msg.startsWith("Hello"))//true
console.log(msg.endsWith("!"))//true
console.log(msg.includes("o"))//true

console.log(msg.startsWith("o"))//false
console.log(msg.endsWith("world!"))//true
console.log(msg.includes("x"))//false

console.log(msg.startsWith("o", 4))//true--從字符串Hello中的o開始
console.log(msg.endsWith("o", 8))//true--字符串的位置是12減去8之后還余下4
console.log(msg.includes("o", 8))//false--從字符串world中的r開始匹配

indexOf和lastIndexof是尋找子串的位置,并且如果你傳一個正則表達式進去的話,它們會將傳入的正則表達式轉化為字符串并搜索它,而在includes等這三方法中,如果你不是傳入字符串而是一個正則表達式則會報錯

repeat 接受一個number類型的參數,表示該字符串的重復次數,返回當前字符串重復一定次數后的新字符串

console.log("X".repeat(5))//XXXXX
正則表達式y修飾符

在字符串開始字符匹配時,它會通知搜索從正則表達式的lastIndex屬性開始進行,如果在指定位置未能成功匹配則停止繼續匹配

let text = "hello1 hello2 hello3",
  pattern = /hellods?/,
  result = pattern.exec(text),
  globalPattern = /hellods?/g,
  glogbalResult = globalPattern.exec(text),
  stickyPattern = /hellods?/y,
  stickyResult = stickyPattern.exec(text);

console.log(result[0])//hello1
console.log(glogbalResult[0])//hello1
console.log(stickyResult[0])//hello1
pattern.lastIndex = 1
globalPattern.lastIndex = 1
stickyPattern.lastIndex = 1
result = pattern.exec(text)
glogbalResult = globalPattern.exec(text)
stickyResult = stickyPattern.exec(text)
console.log(result[0])//hello1
console.log(glogbalResult[0])//hello2
console.log(stickyResult[0])//報錯

關于修飾符有2點:
1、只有調用exec和test方法才會涉及lastIndex
2、當lastIndex的值為0時,如果正則表達式中含有^則是否使用粘滯正則表達式并無差別,如果lastIndex的值不為0則該表達式永遠不會匹配到正確結果

let pattern=/hellod/y
console.log(pattern.sticky)//true
正則表達式復制

ES5中復制正則表達式只能這樣

var re1 = /ab/i,
  re2 = new RegExp(re1);

如果想要對re1重新指定修飾符則不行,ES6 增加了這一新功能

var re1 = /ab/i,
  re2 = new RegExp(re1, "g")
console.log(re1)//   /ab/i
console.log(re2)//   /ab/g
console.log(re1.test("ab"))//true
console.log(re2.test("ab"))//true
console.log(re1.test("AB"))//true
console.log(re2.test("AB"))//false
正則中的flags屬性
let re=/ab/g
console.log(re.source)// ab
console.log(re.flags)// g   --ES新增的屬性
模板字面量

在ES6之前多行字符串只能在一個新行最前方添加反斜杠來承接上一行代碼

var message="Multiline
string"

但是這樣有一個問題,在控制臺輸出在了同一行,所以只能通過手工插入n換行符

ES6中通過反撇號來創建多行字符串,在反撇號中所有空白符都屬于字符串的一部分,所以千萬要小心縮進

字符串占位符可以包含任意的JS表達式,占位符中可訪問作用域中所有可訪問的變量,嘗試嵌入一個未定義的變量總是會拋出錯誤

let count = 10,
  price = 2.5,
  message = `${count} items cost $ ${(count * price).toFixed(2)}.`
  //10 items cost $ 25.00.

字符串占位符還可以內嵌,內嵌的{后必須包含在反撇號中

let name = "angela",
  message = `Hello,${`
    my name is ${name}`
  }`
console.log(message)

String.raw訪問字符串前的原生字符串

let msg1 = `Multiline
stirng`,
  msg2 = String.raw`Multiline
string`
console.log(msg1)//Multiline
//string
console.log(msg2)//Multiline
string

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

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

相關文章

  • H5學習

    摘要:為此決定自研一個富文本編輯器。本文,主要介紹如何實現富文本編輯器,和解決一些不同瀏覽器和設備之間的。 對ES6Generator函數的理解 Generator 函數是 ES6 提供的一種異步編程解決方案,語法行為與傳統函數完全不同。 JavaScript 設計模式 ② 巧用工廠模式和創建者模式 我為什么把他們兩個放在一起講?我覺得這兩個設計模式有相似之處,有時候會一個設計模式不能滿...

    aristark 評論0 收藏0
  • 前端文檔收集

    摘要:系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術點 常用meta整理 網頁性能管理詳解 HTML5 ...

    jsbintask 評論0 收藏0

發表評論

0條評論

liaosilzu2007

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<