04.字串的擴充套件

高階白嫖工程師發表於2020-10-04
字串套件

1.字串的Unicode表示法

  • JavaScript允許採用"\uxxxx"的形式表示一個字元，“xxxx”表示字元的Unicode碼點；這種表示法僅限於表示碼點在“\u0000~\uFFFF"之間的字元，超過這個範圍的字元需要用2個雙位元組的形式表達；
  • ES6對此進行了改進，只要將碼點放入大括號就能正確解讀該字元；
  • ==大括號表示法等價於utf-16編碼；
// JavaScript允許使用\uxxxx形式表示字串
console.log("\u0061"); // a

// 侷限性：超過\uFFFF的字元需要用兩個雙位元組的形式表示
console.log("\uD872\uDFB7"); // ?

// ES6新特性：只要將碼點放入大括號，就能正確識別
console.log("\u{20BB7}"); // ?

// 大括號表示法等價於UTF-16編碼
let res1 = "\u{1F680}" === "\uD83D\uDE80"; // true
console.log(res1);

2.codePointAt()方法（字元===>碼點）

  • 作用：返回32位的utf-16字元的碼點；
  • 引數：字元在字串中的位置，從0開始；
const s = "韛";
let res1 = s.codePointAt(0);

3.String.fromCodePoint()方法（碼點===>字元）

  • 作用：與codePointAt()相反，根據指定碼點返回字元；
  • ES5的String.formCharCode方法也是根據碼點返回字元，但是無法處理32位的utf-16編碼，該方法能夠彌補這一缺陷；
  • 語法：
String.fromCodePoint(0x20BB7);

4.字串的遍歷器介面

  • ES6為字串新增了遍歷器介面，使得字串能使用for…of方法遍歷；
  • 優點：能識別大於\uFFFF的字元，傳統的for迴圈無法識別；
// 利用碼點建立一個字串
let text = String.fromCodePoint(0x20BB7);
// for迴圈
for(let i = 0 ; i < text.length ; i++){
    console.log(text[i]); // for迴圈認為text包含兩個不可列印的字元
}
// for...of遍歷
for(let str of text){
    console.log(str); // ?   for of迴圈能正確識別
}

5. at()

  • ES5中charAt()方法，返回給定位置的字串，但是侷限性在於該方法無法識別大於\uFFFF的字元；
  • at()方法（有提案但是尚未實現）能解決該問題，該方法可以用墊片庫實現；

6.normalize()

  • 作用：表示語調符號和重音符號；

7.includes()、startsWith()、endsWith()

includes()

  • 作用：查詢引數字串是否包含在目標字串中，返回布林值；
  • 語法：
/*
text:要查詢的字元
pos：可選，表示查詢開始的位置
*/
str.includes("text"[,pos]);

const str = "hello world";
// includes:查詢引數字串是否位於目標中
let res1 = str.includes("ll",0);
console.log(res1);// true

startsWith()

  • 作用：查詢引數字串是否包含在源字串的頭部，返回布林值；
  • 指定位置時，指定的位置開始就是源字串頭部；
  • 語法：
/*
text:要查詢的字元
pos：可選，表示查詢開始的位置
*/
str.startsWith("text"[,pos]);

// startsWith：查詢字元是否位於目標的開頭
let res2 = str.startsWith("w",6);
console.log(res2); //true

endsWith()

  • 作用：查詢引數字串是否包含在源字串的尾部，返回布林值；
  • 第二個參數列示從該位置之前的位置開始查詢；
  • 語法：
/*
text:要查詢的字元
pos：可選，表示從pos之前的位置開始
*/
str.endsWith("text"[,pos]);

// endsWith：查詢字元是否位於目標的末尾
let res3 = str.endsWith("o",8);
console.log(res3); // true

8.repeat()方法

  • 作用：返回將字串重複指定次數後組成的新字串；
  • 語法：
/*
n:重複的次數，可以是數值、字串NaN
*/
str.repeat(n);
  • 引數是字串、小數、0~-1之間的數值、NaN、負數或Infinity時的返回值：
// 引數是字串、小數、0~-1之間的數值、NaN、負數或Infinity時的返回值

// 1.引數為字串==>會先將字串轉換為數值
const str = "peanut";
let res1 = str.repeat("3");
let res2 = str.repeat("haha");
console.log(res1); // peanutpeanutpeanut
console.log(res2); // 非數字的字串返回空值

// 2.引數為小數===>向下取整
let res3 = str.repeat(2.9);
let res4 = str.repeat(2.4);
console.log(res3); // peanutpeanut
console.log(res4); // peanutpeanut

// 3.-1~0之間的數值===>先進行取整，取整後等於-0 === 0
let res5 = str.repeat(-0.5); // 取整運算後等同於0
console.log(res5); // 啥也沒有

// 4.NaN===> 等同於0
let res6 = str.repeat(NaN);
console.log(res6); // 啥也沒有

// 5.負數/Infinity===>報錯
let res7 = str.repeat(-5);
let res8 = str.repeat(+Infinity);
let res9 = str.repeat(-Infinity);

9.padStart()、padEnd()

  • ES2017引入的功能；
  • 作用：用於使用指定字元補全字串長度；

padStart()，接受兩個引數:

  • 作用：字串頭部補全；
  • 語法：
/*
num:表示補全後的字串長度；
text:用來補全的字元；
*/
padStart(num,text);

padEnd()，接受兩個引數;

  • 作用：字串頭部補全；
  • 語法：
/*
num:表示補全後的字串長度；
text:用來補全的字元；
*/
padEnd(num,text);

關於字串長度的幾種情況：

  • 原字串長度 >= 指定的最小長度：返回原字串；
const str = "peanut";
let res1 = str.padStart(5);
let res2 = str.padEnd(5);
console.log(res1,res2); // peanut peanut
  • 原字串長度 < 指定的最小長度：按照指定字元補全不足的字元；
let res3 = str.padStart(10,"☹");
let res4 = str.padEnd(10,"-");
console.log(res3); // ☹☹☹☹peanut
console.log(res4); // peanut----
  • 原字串長度與補全字元長度之和 > 指定的最小長度：截去超出位數的補全字串；
let res5 = str.padStart(8,"☹☹☹");
let res6 = str.padEnd(8,"---");
console.log(res5); // ☹☹peanut
console.log(res6); // peanut--
  • 不指定用於補全的字元：預設使用空格補全；
let res7 = str.padStart(8);
let res8 = str.padEnd(8);
console.log(res7); //   peanut
console.log(res8); // peanut

常見用途：

  • 為數值補全指定位數；
  • 提示字串格式；
// 1.補全數值位數
let num = "86";
let num_padS = num.padStart(4,"0");
let num_padE = num.padEnd(4,"0");
console.log(num_padS); // 0086
console.log(num_padE); // 8600

// 2.提示字串格式
let data = "12";
let data_S = data.padStart(10,"YYYY-MM-12");
console.log(data_S); // YYYY-MM-12

模板字串

  • 模板字串就是增強版的字串，用反引號標識；
  • 作用：當普通字串使用、定義多行字串、在字串中嵌入變數；
  • 在模板字串中使用反引號時，要注意轉義；
// 1.在模板字串中，使用反引號要轉義
const str1 = `peanut \`run\` `;
console.log(str1); // peanut `run`
  • 用來表示多行字元時，所有的換行和空格都會被保留；
// 2.表示多行字元時，所有的換行和空格都會保留
const str2 = `peanut
like code!`;
console.log(str2); // peanut
                   //   like code!
  • 如果不想保留字串中的換行，可以使用trim方法；
``.trim();
  • 在模板字串中嵌入變數，需要將變數寫在${}中；
// 4.在模板字串中嵌入變數，需要將變數寫在${}中
for(let i = 0 ; i < 5 ; i++){
    document.write(`這是第${i}次迴圈!`);
}
  • 大括號中可以是任何JavaScript表示式、可以進行運算、引用物件屬性、呼叫函式；
// 5.1 大括號可以是 任意表示式
const x = 1;
const y = 2;
console.log(`${x} + ${y} = ${x + y}`); // 1 + 2 = 3

// 5.2 也可以進行運算
console.log(`${x+ y}`); // 3

// 5.3 引用物件屬性
// 定義物件
const person = {
    name : "peanut",
    age : 33
}
console.log(`my name is ${person.name} , ${person.age} years old!`); // my name is peanut , 33 years old!

// 5.4 呼叫函式
function test() {
    console.log("peanut 666");
}
`test text : ${test()}`; // peanut 666
  • 如果大括號中的值不是字串，將按照一般的規則將其轉換為字串；比如物件，會呼叫物件的toString方法轉換為字串；
  • 如果大括號中的內容是字串，則會原樣輸出；
  • 模板字串可巢狀使用；
  • 引用模板字串本身：
// 寫法1：
let str = "return" + "`hello ${name}`";
let fn = new Function("name",str);
console.log(fn("寶雞"));

// 寫法2：
let func = (name) => `Hello ${name}!`;
func('Jack') // "Hello Jack!"

11.例項：模板編譯（略：p60）

12.標籤模板

13.String.row()

  • 作用：可以作為處理模板字串的基本方法，會將所有變數替換，並對反斜線進行轉義，方便下一步作為字串使用；

14.模板字串的限制

  • 模板字串預設會將字串轉義，因而無法在模板字串中插入其他語言；

相關文章