ES6字符串扩展教程：Unicode表示法、模板字符串与includes/padStart等方法

本节将深入探讨 ES6 中字符串类型的扩展特性，重点介绍字符串对象新增方法的实际应用。

字符的 Unicode 表示法

ES6 进一步强化了对 Unicode 的支持，允许在 JavaScript 中使用 \uxxx 格式表示字符，其中 xxxx 代表字符的码点。例如：


console.log("\u0075"); // u

然而，这种表示法仅适用于码点位于 \u0000 到 \uFFFF 之间的字符。若码点超出此范围，必须采用双字节形式表示。


console.log("\uD842\uDFB7"); // 𠮷
console.log("\u20BB8"); // 8

这意味着，若在 \u 后直接跟随超过 0xFFFF 的数值（如 \u20BB8），JavaScript 会将其解析为 \u20BB 加上数字 8。由于 \u20BB 是不可打印字符，最终显示结果为一个空格后跟数字 8。

ES6 对此进行了改进，只需将码点置于大括号内，即可正确解析该字符。


console.log("\u{20BB7}"); // 𠮷

console.log("\u{41}\u{42}\u{43}"); // ABC

let hello = 123;
console.log(hell\u{6F}); // 123

 
console.log('\u{1F680}' === '\uD83D\uDE80'); // true

上述代码示例表明，大括号表示法与四字节的 UTF-16 编码在功能上是等价的。

引入这种表示法后，JavaScript 现在共有六种方式可以表示一个字符。


'\z' === 'z' // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

遍历器接口

ES6 为字符串添加了遍历器接口，使其能够被 for...of 循环直接遍历。

示例：例如，我们可以遍历字符串 xkd：


for (let i of 'xkd') {
 console.log(i)
}

输出结果：

x k d

除了遍历字符串，该遍历器接口的最大优势在于能够正确识别码点大于 0xFFFF 的字符，而传统的 for 循环无法做到这一点。

示例：


let a = String.fromCodePoint(0x20BB7);

for (let i = 0; i < a.length; i++) {
 console.log(a[i]);
}

for (let i of a) {
 console.log(i);
}

在上述代码中，字符串 a 实际上只包含一个字符，但 for 循环会错误地将其识别为两个字符（均为不可打印字符），而 for...of 循环则能正确识别出这唯一的字符。

模板字符串的使用

在 JavaScript 语言中，若需输出内容，通常采用如下方式：


var name = "侠课岛";
var age = 10;
console.log("我的名字是"+ name + "，我今年" + age + "岁了。" );
// 输出：我的名字是侠课岛，我今年10岁了。

这种写法需要大量使用双引号和加号进行拼接，操作起来非常不便。

ES6 引入了模板字符串，只需将内容用反引号包裹，并将变量部分用 ${} 括起即可。

示例：上述例子可改写为使用模板字符串的形式：


var name = "侠课岛";
var age = 10;
console.log( `我的名字是${name} ，我今年${age}岁了。`);

// 输出：我的名字是侠课岛，我今年10岁了。

显然，这种写法语法更加简洁，无需再使用大量双引号和加号来拼接字符串与变量。

模板字符串均使用反引号表示。若需在模板字符串中嵌入反引号，需在其前添加反斜杠 \ 进行转义。

示例：


let content = `\`hello\` xkd!`;
console.log(content); // 输出：`hello` xkd!

若使用模板字符串表示多行字符串，所有的空格和缩进将在输出中得以保留。


console.log( `你好\` 我叫做侠课岛,
今年3岁啦！`);

执行代码后，将直接输出如下内容：

你好` 我叫做侠课岛, 今年3岁啦！

在模板字符串中嵌入变量

若要在模板字符串中嵌入变量，变量必须置于 ${} 内部才能正常显示，否则将被视为普通字符串输出。

示例：


var name= "xkd";
console.log(`你好，${name}`);

// 输出：你好，xkd

若模板字符串中的变量未被声明，将导致报错。


let content = `Hello, ${name}`;
console.log(content);  // 输出：ReferenceError: name is not defined

由于模板字符串的大括号内部执行的是 JavaScript 代码，若大括号内为字符串，则原样输出。


let content = `Hello, ${"xkd"}`;
console.log(content); // 输出：Hello, xkd

大括号 ${} 内部可放入任意 JavaScript 表达式，支持运算及引用对象属性。


var a = 10;
var b = 20;
console.log(`a=${++a}， b=${a+b}`);

// 输出：a=11， b=31

在模板字符串中调用函数

ES6 中模板字符串具备更强大的功能，允许在模板字符串中直接调用函数。

示例：


function show() {
 return "侠课岛";
}

console.log(`你好，你叫什么名字?
你好，我叫${show()}`);

执行代码后，输出内容如下：

你好，你叫什么名字? 你好，我叫侠课岛

若大括号中的值非字符串，将按常规规则转换为字符串。例如，若大括号内为对象，则默认调用该对象的 toString 方法。

判断是否包含子字符串

JavaScript 原本可使用 indexOf() 方法判断字符串是否包含子字符串。ES6 新增了三种方法用于此目的，具体如下：

includes()：返回布尔值，表示是否找到参数字符串。
startsWith()：返回布尔值，表示参数字符串是否位于原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否位于原字符串的尾部。

示例：

这三个方法均接受两个参数：第一个为需搜索的字符串，第二个为可选的搜索起始位置索引：


let string = "hello, xkd";

console.log(string.includes("hello")); // true
console.log(string.startsWith("x", 7)); // true
console.log(string.endsWith("abc"));  // false

需注意，上述方法的返回值均为布尔值。若需获取子字符串的具体位置，仍应使用 indexOf() 和 lastIndexOf() 方法。

字符串重复

ES6 新增了一个 repeat() 方法，用于返回一个新字符串，表示将原字符串重复指定次数。

示例：


console.log("a".repeat(5)); // 输出：aaaaa

若 repeat() 函数的参数为小数，则执行向下取整操作：


console.log("a".repeat(3.1)); // 输出：aaa
console.log("b".repeat(4.5)); // 输出：bbbb
console.log("c".repeat(5.9)); // 输出：ccccc

若参数为 0 到 -1 之间的小数，同样执行取整运算。0 至 -1 之间的小数取整结果为 -0，等同于重复零次：


console.log("a".repeat(-0.1)); // 输出：""
console.log("b".repeat(-0.9)); // 输出：""

若传入的参数为字符串，则先将其转换为数字：


console.log("a".repeat("five")); // 输出: ""
console.log("b".repeat("3"));  // 输出: bbb

字符串补全

ES6 为字符串补全提供了两个新方法，具体如下：

padStart()：返回新字符串，表示使用参数字符串从头部（左侧）补全原字符串。
padEnd()：返回新字符串，表示使用参数字符串从尾部（右侧）补全原字符串。

这两个方法接受两个参数：第一个指定生成字符串的最小长度，第二个为用于补全的字符串。若未指定第二个参数，默认使用空格填充。

示例：


console.log("xkd".padStart(5, "o")); // 输出：ooxkd 
console.log("a".padEnd(3, "xkd"));  // 输出：axk
console.log("b".padStart(3));    // 输出： b

若指定的长度小于或等于原字符串长度，则直接返回原字符串：


console.log("hello".padStart(3,"a")); // hello
console.log("hello".padStart(7,"a")); // aahello

若原字符串加上补全字符串的长度大于指定长度，则截去超出位数的补全字符串：


console.log("hello".padEnd(7,",xkd!"));  // hello,x
console.log("abcde".padEnd(10,"fghijk")); // abcdefghij

该方法还可用于补全位数：


console.log("1".padStart(10, "0")); // 0000000001
console.log("2".padEnd(10, "0"));  // 2000000000

本文关于 ES6 字符串扩展实例的介绍到此结束，更多相关 ES6 字符串扩展内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

ES6字符串扩展方法详解：Unicode、模板字符串与新增API