【深入淺出ES6】字串與正規表示式

Eric_zhang發表於2019-03-04
字串

【深入淺出ES6】字串與正規表示式

字串新增部分功能

識別子字串方法

  • includes()
  • startwith()
  • endwith()

三個方法均返回bool值，表示子字串是否存在，且傳入的引數必須為字串，不能是正規表示式 如果希望找到對應出現的確定位置，則仍需要使用已有的indexOf()、lastIndexOf()方法

repeat()

快速生成重複性字串，函式中的參數列示重複的次數

console.log("x".repeat(3));         // "xxx"
console.log("hello".repeat(2));     // "hellohello"
console.log("abc".repeat(4));       // "abcabcabcabc"
複製程式碼

模板字面量 ``

  • 多行字串：針對多行字串的形式概念；
  • 基本的字串格式化：將字串部分替換為已存在的變數值的能力；
  • HTML 轉義：能轉換字串以便將其安全插入到 HTML 中的能力

若你想在字串中包含反引號，只需使用反斜槓（ \ ）轉義即可，

let message = `\`Hello\` world!`;
console.log(message); // "`Hello` world!"
複製程式碼

在字串中插入js表示式

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

模板字串也是js表示式，因此可以使用巢狀模板字串

let name = "Nicholas",
    message = `Hello, ${
        `my name is ${ name }`
    }.`;

console.log(message);        // "Hello, my name is Nicholas."
複製程式碼

標籤模板（模板字面量的增強功能）

使用標籤模板提供了對模板字面量再加工的能力

設定一個函式，將函式名放在模板字面量前面，作為模板的標籤，該標籤函式接收到模板字面量中設定的引數，傳遞到標籤函式中

function tag(literals, ...arg){
    console.log(literals) // ["", "my age is ，and your name is ", ""]
    console.log(arg) // [22, "tom"]
    return 'from tag function'
   }

    let age = 22;
    let name = 'tom'
    let result = tag`${ age }my age is ，and your name is ${name}`

   console.log(result)
複製程式碼

tag為標籤函式

  • 第一個引數literals為陣列，元素為模板字面量中被變數分割開的每一個字串 ["", "my age is ，and your name is ", ""]
  • 第一個引數之後的引數，為模板字面量中依次使用的變數，一般常用 結構符號... 將其放入一個陣列中 [22, "tom"]
  • 標籤函式中的返回作為標籤模板最終的返回值

正規表示式新增部分功能

複製正規表示式 new RegExp()

支援傳入第二個引數，表示正規表示式的標誌(i:忽略大小寫、g:全域性匹配)，第二個引數會覆蓋原有正則中的標誌

var re1 = /ab/i,

    // throws an error in ES5, okay in ES6
    re2 = new RegExp(re1, "g");

console.log(re1.toString());            // "/ab/i"
console.log(re2.toString());            // "/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屬性

var re = /ab/g;
console.log(re.source); // "ab"
console.log(re.flags); // "g"
複製程式碼

相關文章