ES6之字符串操作

在上一章中，我们了解到了解构，这章，我们来学习一下ES6中的字符串操作，在过去，我们知道JavaScript对字符串有很多函数，如charAt、concat、slice、split、replace、substr、substring、toString等等，在这一章中，我将分享ES6中的字符串。

在JavaScript中，我们知道在字符串中可以使用\uxxxx这种Unicode写法，我曾经用这种代码混淆公司代码版权，是一种很有意思加密方式，在ES6中，这类字符串操作也略有扩展，我们先来看看一段代码。

let unicodeStr = "\u60a8\u597d\uff0c\u9886\u57df\u0021";
console.log(unicodeStr);    //您好，领域!

这是一组正常的Unicode编码格式的字符串，其内容是"您好，领域!"，在如今社交App比较多的情况下，表情字符也是非常多的，比如：苹果手机的输入法，微信聊天表情等，我们来看看这些表情在Unicode中表示如下：

let  basketball = "\ud83c\udfc0";
console.log(basketball);    //输出一个篮球表情

因为一个表情字符在JavaScript中占用四个字节，所以Unicode码会使用两组来表示，但是在ES6语法中有扩展，如下：

let basketball = "\u{1f3c0}";
console.log(basketball);     //输出的结果与\ud83c\udfc0相同

在ES6中，{}编写方式与utf-16的编码是等价的，我们来看看，如何去换算篮球表情字符。

let basketball = "?";
console.log(basketball.codePointAt(0).toString(16));    //输出1f3c0 即 \u{1f3c0}
console.log(basketball.charCodeAt(0).toString(16));    //输出d83c 即 \ud83c
console.log(basketball.charCodeAt(1).toString(16));    //输出dfc0 即 \udfc0
console.log("\u{1f3c0}" === "\ud83c\udfc0");      //输出 true
console.log(basketball.length);      //输出2

上述代码中，我们可以看得出篮球字符占用4个字节，而JavaScript中一个字符最大只有2个字节，所以basketball的length == 2， codePointAt是ES6中新扩展出来的一个函数，会自动正确识别字符的字节长度。

假如，我们要统计一串聊天记录中的字符长度，我们如何做呢？let call = "我们一起打?吧？";

let count = 0;
for(let i = 0, n = call.lenght; i < n; count++) {
        ++i;
        if(call.codePointAt(i) > 0xFFFF)
              ++i;
}
console.log("本次聊天字符长度为：" + count);     //输出结果：本次聊天字符长度为：8

当然，在ES5中提供charCodeAt与fromCharCode，同样的，ES6中也提供了与codePointAt互相操作的函数 fromCodePoint，它会将\u{1f3c0}输出一个篮球字符。

接下来，我们看看ES6为我们提供了一种很有意思的字符扩展功能，有学习过asp.net和java的同学应该都知道有服务器标签，比如:

<!--JSP中的服务器脚本-->
<div><c:out value="basketball" /></div>
<!--ASP.NET中的服务器脚本-->
<div><%=basketball %></div>
<!--ASP.NET MVC中的Razor语法脚本-->
<div>@{ model.basketball }</div>

上述是JSP和Asp.net中的脚本语法，我们来看看ES6为我们扩展的模板语法。

let basketball = "我们一起打篮球吧？";
console.log(`本次聊天内容是：${basketball}`);
//输出结果：本次聊天内容是：我们一起打篮球吧？
let el = document.createElement(`<div>${basketball}</div>`)
//页面会呈现一个div，内容是：我们一起打篮球吧？
document.body.appendChild(el);

怎么样，跟服务器脚本语言很类似吧，但ES6这种语法不单纯只有这种程度的用法，还有更有意思的，比如：

let beaketball = '篮球';
function call(templates)
{
    let result = "";
    for(let i = 0; i < templates.length; i++)
        result += templates[i] + (arguments[i + 1] || "");
    return result;
}
let msg = call `我们一起打${beaketball}吧？`;
console.log(msg);    //我们一起打篮球吧？

我们可以将模板语法的内容进行一个预处理，这种方式被称为标签语法，call是一种特殊的函数，其参数templates是${}为切割点的数组，而arguments[1 ~ n]是每个${}的排列值，有n个${}，arguments.length就有n + 1。