【ES6】学习笔记：字符串扩展

博文类型： 学习向
背景： 学习ES6语法并做学习笔记
目标： 跟着ES6教程实操，并记录实操结果

---

一、字符串扩展

JavaScript：允许采用\u 的形式来表示一个字符，但是单个字符不能超过\uFFFF，如果超过了，则需要使用双字节来表示。
ES6：可以用\u{xxxx}来表示超过\uFFFF 的字符。

1.fromCodePoint

---

作用：可以识别码点大于 0xFFFF 的码点，从码点返回字符串。

//不能识别码点大于0xFFFF的字符串
console.log(String.fromCharCode(0x20bb7));
// "ஷ"

//可以识别码点大于0xFFFF的字符串
console.log(String.fromCodePoint(0x20bb7));
//𠮷

2.raw

---

作用：
1.转义模板语法的斜杠
2.作为函数拼接数组

//1.转义模板语法的斜杠
console.log("hello\nli");
//hello
//li

console.log(String.raw`hello\nli`);
//hello\nli

//2.拼接数组
console.log(String.raw({ raw: ["hello", "li"] }, "\n"));
//hello
//li

3.codePointAt

---

JavaScript 中，字符串以 UTF-16 的格式存储，每个字符固定为 2 个字节。对于需要四个字节存储的字符（码点大于 0xFFFF），传统的 charAt 方法无法获得码点，charCodeAt 方法只能分别获取前两个字节和后两个字节。
作用：
获取需要四个字节存储的字符的码点。

let val = "𠮷a"; //码点：0x20BB7，UTF-16：0xD842 0xDFB7，十进制：55362 57271
console.log(val.length);
// 3
console.log(val.charAt(0));
// �
console.log(val.charAt(1));
// �
console.log(val.charAt(2));
// a
console.log(val.charCodeAt(0));
// 55362
console.log(val.charCodeAt(1));
// 57271
console.log(val.charCodeAt(2));
// 97
console.log(val.codePointAt(0));
// 134071
console.log(val.codePointAt(0).toString(16));
// 20bb7
console.log(val.codePointAt(1));
// 57271
console.log(val.codePointAt(2));
// 97
console.log(val.codePointAt(2).toString(16));
// 61

//由于codePointAt中a明明是在第二个，而序号却是第三个，想要序号与位置一一对应，可以用遍历来处理
let val = "𠮷a";
for (let item of val) {
  console.log(item.codePointAt(0).toString(16));
}
//20bb7
//61

4.normalize

---

许多欧洲语言有语调符号和重音符号。
Ǒ 有两种方式表示这个字符：
1.\u01D1
2.O（\u004F）和 ˇ（\u030C）=Ǒ（\u004F\u030C）
作用： 使两种表示方式统一，并使它们相等，称作 Unicode 正规化

console.log("\u01D1" === "\u004F\u030C");
//false

console.log("\u01D1".length);
//1

console.log("\u004F\u030C".length);
//2

console.log("\u01D1".normalize() === "\u004F\u030C".normalize());
//true

5.inclouds 和 indexOf 和 startsWith 和 endsWith

---

作用：
inclouds:字符串、数组是否包含某元素，如果包含则返回 true
indexOf:字符串、数组是否包含某元素，如果包含则返回下标
startsWith:字符串是否以某一元素开头，如果是则返回 true
endsWith:字符串是否以某一元素结尾，如果是则返回 true

let a = [2, 3, 4];
let b = "abc";
console.log(a.indexOf(2));
//0

//以下方法是es6的方法
console.log(a.includes(2));
//true

console.log(a.includes(3, 1));
//true 从第2位开始包含第2位，后面包含3则返回true

console.log(a.startsWith(2));
//error

console.log(a.endsWith(4));
//error

console.log(b.indexOf("b"));
//1

console.log(b.includes("b"));
//true

console.log(b.includes("b", 2));
//false 从第3位开始包含第3位，后面包含b则返回true

console.log(b.startsWith("a"));
//true

console.log(b.startsWith("a", 1));
//false 从第2位开始包含第2位，后面是否以a开头，如果是则返回true

console.log(b.endsWith("c"));
//true

console.log(b.endsWith("a", 1));
//true 前1位是否以a结尾，如果是则返回true

6.repeat

---

作用：重复字符串

let b = "abc";
console.log(b.repeat(2));
//abcabc

7.padStart padEnd

---

作用：前填充，尾填充，不需填充不填充

let a='acb'
console.log(a.padEnd(6,'1234'));
//acb123

console.log(a.padStart(6,'1234'));
//123acb

console.log(a.padStart(6));
//   acb

8.标签模板

---

作用：函数后面可以直接跟一个模板字符串，这个模板字符串可以被该函数调用。这被称为“标签模板”功能

let a='c'
let b='w'
let c=`超级${a},无敌${b}`
function fc(){
	console.log(arguments);
}
fc`超级${a},无敌${b}`
//[['超级','无敌',''],'c','w']