ES6 字符串的擴展

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