es6 字串的擴充套件

Zingiber發表於2019-09-17
字串套件

1.1字元的Unicode表示法

採用\uxxxx表示一個字元，xxxx表示字元的Unicode碼點，這個表示法只限於碼點在\u0000~\uFFFF之間的字元，超出範圍要用雙位元組的形式表示

"\u0061"; //a
"\uD842\uDFB7"; // "?"
"\u20BB7"; // " 7",\u20BB是不可列印字元，顯示一個空格

// ES6對Unicode表示法的改進
"\u{20BB7}"; // "?"
"\u{41}\u{42}\u{43}"; // "ABC"
複製程式碼

1.2字串的遍歷器介面

ES6為字串新增了遍歷器介面

for (let item of 'foo') {
  console.log(item)
}
// "f"
// "o"
// "o"
複製程式碼

1.3特殊字元

JavaScript 規定有5個字元，不能在字串裡面直接使用，只能使用轉義形式。

  • U+005C：反斜槓（reverse solidus)
  • U+000D：回車（carriage return）
  • U+2028：行分隔符（line separator）
  • U+2029：段分隔符（paragraph separator）
  • U+000A：換行符（line feed）

1.4模版字串

模版字串是增強版的字串，用反引號（`）標識。可以當作普通字串使用，也可以定義多行字串，也可以在字串中嵌入變數。

1.3.1基本用法

let message = `Hello World`;
複製程式碼

要在模版字串中使用反引號，可以使用反斜槓轉義

let message = `Hello \` World`;
複製程式碼

空格、縮緊、換行都被保留

let message = `
	<ul>
		<li>1</li>
		<li>2</li>
	</ul>
`;
複製程式碼

如果你不想要這個換行，可以使用trim方法消除它。

let message = `
	<ul>
		<li>1</li>
		<li>2</li>
	</ul>
`.trim();
複製程式碼

1.3.2嵌入變數

模板字串中嵌入變數，需要將變數名寫在${}之中。其實不止變數，任意的 JavaScript 表示式都是可以的

let x = 1, y = 2;
let message = `<ul><li>${x}</li><li>${x + y}</li></ul>`;
console.log(message); // <ul><li>1</li><li>3</li></ul>
複製程式碼

支援巢狀

let arr = [{value: 1}, {value: 2}];
let message = `
	<ul>
		${arr.map((item) => {
			return `
				<li>${item.value}</li>
			`
		})}
	</ul>
`;
console.log(message);
/*
	<ul>
		
				<li>1</li>
			,
				<li>2</li>
			
	</ul>
*/
複製程式碼

在 li 標籤中間多了一個逗號，這是因為當大括號中的值不是字串時，會將其轉為字串，比如一個陣列 [1, 2, 3] 就會被轉為 1,2,3，逗號就是這樣產生的。可以用join消除。

模板字串之中還能呼叫函式

function fn() {
  return "Hello World";
}

console.log(`foo ${fn()} bar`); // foo Hello World bar
複製程式碼

1.4標籤模板

模板字串可以緊跟在一個函式名後面，該函式將被呼叫來處理這個模板字串。稱為標籤模板。

標籤模板其實不是模板，而是函式呼叫的一種特殊形式。“標籤”指的就是函式，緊跟在後面的模板字串就是它的引數。

let x = 'Hi', y = 'Kevin';
var res = message`${x}, I am ${y}`;
console.log(res);
// 等同於
message(["",", I am ", ""],"Hi","Kevin");
複製程式碼

message函式用來處理返回的字串。

function message(literals, value1, value2) {
    // ...
}
// 等同於
function message(literals, ...values){
    //...
}
複製程式碼

函式第一個引數為陣列，陣列成員是模版字串中沒有變數替換的部分。變數替換隻發生在陣列的第一個成員之後。

1.5字串新增方法

1.5.1 String.fromCodePoint()

靜態方法返回使用指定的程式碼點序列建立的字串。

引數： num1, ..., numN： 一串 Unicode 編碼位置，即“程式碼點”。

返回值：使用指定的 Unicode 編碼位置建立的字串。

console.log(String.fromCodePoint(9731, 9733, 9842, 0x2F804));
// expected output: "☃★♲你"
複製程式碼

1.5.2例項方法includes(), startsWith(), endsWith()

用來確定一個字串是否包含在另一個字串中

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
複製程式碼

1.includes()

判斷一個字串中是否包含在另一個字串，根據情況返回true或false。

引數：

  1. searchString要在此字串中搜尋的字串。
  2. position，可選。從當前字串的哪個索引位置開始搜尋子字串，預設值為0。

區分大小寫

2.startsWith

判斷當前字串是否以另外一個給定的子字串開頭，根據結果返回true或false。

引數：

  1. searchString要搜尋的子字串。
  2. position 可選。在 str 中搜尋 searchString 的開始位置，預設值為 0，也就是真正的字串開頭處。

3.endsWith()

判斷當前字串是否是以另外一個給定的子字串“結尾”的，根據判斷結果返回 true 或 false。

引數：

  1. searchString要搜尋的子字串。
  2. length，可選。作為 str 的長度。預設值為 str.length。

1.5.3例項方法：repeat()

構造並返回一個新字串，該字串包含被連線在一起的指定數量的字串的副本。

引數：count--介於0和正無窮大之間的整數 : [0, +∞) 。表示在新構造的字串中重複了多少遍原字串。引數如果是小數，會取整。

x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat(2.9) // "nana"
複製程式碼

1.5.4例項方法：padStart(), padEnd()

用於字串補全長度

1.padStart()

用另一個字串填充當前字串(重複，如果需要的話)，以便產生的字串達到給定的長度。填充從當前字串的開始(左側)應用。

引數：

  1. targetLength當前字串需要填充到的目標長度。如果這個數值小於當前字串的長度，則返回當前字串本身。
  2. padString 可選 填充字串。如果字串太長，使填充後的字串長度超過了目標長度，則只保留最左側的部分，其他部分會被截斷。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
複製程式碼

2.padEnd()

同上，填充從當前字串末尾(右側)開始填充

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
複製程式碼

1.5.5例項方法：trimStart()/trimLeft, trimEnd()/trimRight()

trimStart() / trimLeft()方法移除原字串左端的連續空白符並返回，方法並不會直接修改原字串本身。

trimStart() / trimLeft()方法移除原字串左端的連續空白符並返回,方法並不會直接修改原字串本身。

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"
複製程式碼

摘自阮一峰

參考MDN 冴羽Git

相關文章