ES6 字符串 String 的扩展详解：模板字符串与新增方法

模板字符串与标签模板

新特性：模板字符串

传统字符串

let name = "Jacky";
let occupation = "doctor";
 //传统字符串拼接
let str = "He is "+ name +",he is a "+ occupation;

ES6 提供了更简洁的字符串拼接方式。

let name = "Jacky";
let occupation = "doctor";
//模板字符串拼接
let str = `He is ${name},he is a ${occupation}`;

对比传统的拼接代码，模板字符串消除了反复使用双引号或单引号的繁琐操作。开发者只需使用反引号（`）作为标识符，并在其中通过 ${} 语法插入变量，无需再使用加号（+）进行连接。

使用时需要注意以下几点：

1、支持定义多行字符串。

传统的多行字符串写法通常如下：

let str = "write once ," +
 "run anywhere";

而模板字符串的写法则更为直观：

 let str = `write once ,
 run anywhere`;

直接在代码中换行即可实现多行字符串。需要注意的是，代码中的空格和换行符会被完整保留在输出结果中。例如，如果在控制台输出变量 str，代码中的换行会在控制台输出时体现出来。

2、${} 中可以放入任意 JavaScript 表达式。

${} 内部可以包含运算表达式，例如：

var a = 1;
var b = 2;
var str = `the result is ${a+b}`;
//进行加法运算 结果：the result is 3

${} 也可以用于访问对象的属性，例如：

var obj = {"a":1,"b":2};
var str = `the result is ${obj.a+obj.b}`;
//对象obj的属性
//结果：the result is 3.

${} 同样支持函数的调用，例如：

function fn() {
return 3;
}
var str = `the result is ${ fn() }`;
//函数fn的调用，结果：the result is 3

标签模板

这里的“模板”指前述用反引号定义的字符串，“标签”则指专门处理该模板字符串的函数。

var name = "张三";
var height = 1.8;

tagFn`他叫${name},身高${height}米。`;
//标签+模板字符串

//定义一个函数，作为标签
function tagFn(arr,v1,v2){
console.log(arr); 
//结果：[ "他叫","，身高","米。" ]
console.log(v1); 
//结果：张三
console.log(v2); 
//结果：1.8
}

上述代码中有两处关键点需要详细讲解。首先是 tagFn 函数，这是一个自定义函数，接收三个参数：arr、v1 和 v2。tagFn 的调用方式与传统函数不同，传统调用使用括号 ( )，而这里是在函数名后直接跟随一个模板字符串，如以下代码所示：

tagFn`他叫${name},身高${height}米。`;

这种语法被称为标签模板，可以理解为“标签函数”加上“模板字符串”，这是 ES6 引入的一种新语法规范。

接下来分析函数的三个参数。从代码打印结果可以看出，arr 的值是一个数组：[ "他叫" , "，身高" , "米。" ]，v1 的值是变量 name 的内容“张三”，v2 的值是变量 height 的内容：1.8。

观察规律可知：第一个参数 arr 是数组类型，其内容是由模板字符串中除 ${} 以外的其他字符按顺序组成的数组，因此 arr 的值为 [ "他叫", "，身高" , "米。" ]；第 2、3 个参数则分别对应模板字符串中按顺序出现的变量 name 和 height 的值。

标签模板是 ES6 带来的一种新语法，常用于过滤用户非法输入和多语言转换。此处不再展开，但掌握该用法后，可根据具体需求利用此特性实现各种功能。

ES6 新增 String 方法详解

ES6 新增的 String 函数。

repeat( ) 函数：将目标字符串重复 N 次，返回一个新字符串，原字符串不受影响。

var name1 = "王汉炎"; //目标字符串
var name2 = name1.repeat(3);
//变量name1被重复三次；

console.log(name1); 
//结果：王汉炎

console.log(name2);
//结果：王汉炎王汉炎王汉炎

includes( ) 函数：判断字符串中是否包含指定的子字符串，若包含返回 true，否则返回 false。第二个参数为可选参数，指定开始搜索的位置。

var name = "王汉炎";//目标字符串
name.includes('炎'); 
//true, 含有

name.includes('web'); 
//false, 不含有

name.includes('王',1); 
//false, 从第2个字符开始搜索, 不含有

传统做法通常借助 indexOf( ) 函数实现，若包含指定字符串，indexOf( ) 返回子字符串首次出现的位置；若不包含，则返回 -1。通过判断返回值是否为 -1 来确定是否包含子字符串。现在可以使用 includes( ) 函数替代 indexOf( )，因为其返回值更直观（true 或 false），且通常无需关心子字符串的具体位置。

startsWith( ) 函数：判断指定的子字符串是否出现在目标字符串的开头位置。第二个参数为可选参数，指定开始搜索的位置。

var name = "王汉炎"; //目标字符串

name.startsWith('王'); 
//true，出现在开头位置

name.startsWith('汉'); 
//false，不是在开头位置

name.startsWith('汉',1); 
//true，从第2个字符开始

endsWith( ) 函数：判断子字符串是否出现在目标字符串的尾部位置。第二个参数为可选参数，指定针对前 N 个字符进行判断。

var name = "我就是王汉炎";//目标字符串

name.endsWith('我');
//false，不在尾部位置

name.endsWith('炎'); 
//true，在尾部位置

name.endsWith('炎',5); 
//false，只针对前5个字符

name.endsWith('炎',6);
//true，针对前6个字符

在 JavaScript 中，一个字符通常固定占用 2 个字节。对于那些需要 4 个字节存储的字符，JavaScript 会将其视为两个字符，此时其字符长度 length 为 2。例如字符：“𠮷”，这是一个需要 4 个字节存储的字符，其 length 为 2。这会导致什么问题？对于 4 字节的字符，JavaScript 无法正确读取字符内容，我们来验证一下。

var str1 = "前端";
var str2 = "𠮷";

str1.length; //length为2
str2.length; //length为2

str1.charAt(0); //前
str1.charAt(1); //端

str2.charAt(0); //'�'
str2.charAt(1); //'�'

可以看到，str1 和 str2 的长度 length 均为 2。因为字符“𠮷”是 4 字节字符，使用 charAt 函数（charAt() 方法可返回指定位置的字符）能正确读取字符串 str1 的字符，但无法正确读取 4 字节的字符，此时返回结果出现乱码。

然而，如果使用 ES6 提供的 codePointAt( ) 函数，就可以处理这种 4 字节的字符。具体使用方法如下：

var str = "𠮷";
str.codePointAt(); //结果:134071

对于这个长度 length 为 2 的字符“𠮷”，codePointAt( ) 方法可以正确识别其为 4 字节字符，并正确返回其码点的十进制数：134071。将该数字转换为 16 进制即为 20bb7，对应的 Unicode 编码为 \u20bb7。

String.fromCodePoint( ) 函数：该函数的参数是一个字符对应的码点，返回结果即为对应的字符。即使该字符是 4 字节字符，也能正确处理。

我们可以利用上面得到的十进制数字 134071 进行反向验证。

String.fromCodePoint(134071); //结果：“𠮷” String.raw( ) 函数：从函数名 raw（未加工）可以看出其作用。正如函数名所示，该函数返回字符串最原始的样子，即使字符串中包含转义符，它也视而不见，直接输出原始内容。

 console.log(`hello\nworld`);
//输出：hello
world
 console.log(String.raw`hello\nwolrd`);
//输出：hello\nwolrd

总结：ES6 为字符串带来了诸多实用性的扩展，包括模板字符串、标签模板、repeat 函数、includes 函数、startsWith 函数、endsWith 函数、codePointAt 函数、String.fromCodePoint 函数以及 String.raw 函数。

以上关于 ES6 字符串 String 扩展的实例讲解全部内容分享给大家，希望能对各位有所帮助，也希望大家多多支持本站。