ES6之字符串拓展

ES6中,还是对字符串做了很多的改进,尤其是函数方面,增加了很多个方法。但是核心的变动,其实只有两个:

  • Unicode拓展
  • 字符模板

Unicode拓展

在讲ES6之间,我们先了解一些背景知识。

为什么会出现Unicode

我们知道,计算机最底层其实只能识别‘0’和‘1’,就是yes或者no。但是人脑是非常高级的,我们见面会打招呼“您吃了没?”,这句话如果是想告知计算机的话,它肯定是听不懂的,最后计算机接收的其实类似于:“01010101010001100111”的字符串。那么,当这些字符串通过QQ展示出来的时候,又要去展示对人脑友好的文字。“您吃了没?”和“01001010111”这样的字符串是如何对应的呢?

因为最初的计算机和技术都是美国发明的,所以他们首先提出了方案ASCII,即使用一个字节表示所有的字符和符号。比如:”00000001”表示”a”,”00000010”表示”b”(举例用,数值不对).这样,使用一个字节就解决了所有的英文展示问题。但是256足够表示所有的英文了,中文可没办法,或者其他语言,也不能够用。这样,就提出了Unicode的概念,希望所有的字符,全部都使用Unicode表示。

Unicode的第一个版本是打算使用两个字节来表示所有的字符,比如1-200给英文,200-5000给中文等等,这样总共就有2^16次方个,基本足够了。(后来发现还是不够,Unicode的第二个版本就使用4个字节,共2^32个

所有的字符都有一个数字对应的了,怎么保存呢?这里很多人容易搞错,因为Unicode提出了使用2个字节来表示所有字符,所以大家把UTF16Unicode弄混淆了。应该说,UTF16来存储和Unicode真的是天作之合,因为两者都是使用两个字节。但是这样也出现了一个问题,比如如果一篇英文文章,他使用的字符段,都是一个字节就能表示出来了,使用2个字节表示,简直是浪费空间,所以又提出了UTF8,即使用1个字节存储,如果出现了需要两个字节的情况,想办法做兼容。

综上,我们说的Unicode是为了表示所有的字符的一种定义方法,而UTF8UTF16是为了存储Unicode的一种方案。

这里如果比较有兴趣,可以看下博客Unicode(UTF-8, UTF-16)令人混淆的概念

ES6做的拓展

JS是支持直接展示Unicode的,比如:

1
console.log("\u0061");//"a";

但是只限 \u0000 - \FFFF之间的,如果是 \u00001这样的,就不支持了。

而ES6对该点做了补充,可以直接使用了,如:

1
console.log("\u{00001}");//使用大括号包含,和四字节的UTF16等价

还可以连接使用:

1
conslle.log("\u{1}\u{2}");//"ab" 都是举例,对应字符串可能不对

ES6中还补充了很多的函数,大家有兴趣,自己去翻下文档,这里简单罗列下:

  • codePointAt()
  • String.fromCodePoint()
  • at()
  • normalize()
  • includes()
  • startsWith()
  • endsWith()
  • repeat()

模板字符串

在JS中,如果我们想要表达一个含有变量的字符串,大概会这样写:

1
2
3
let name = "飞";
let lunch = "午饭";
let ask = name + "您吃" + lunch + "吗?";//飞您吃午饭了吗?

不得不说,这样写,比较丑。

模板字符串

ES6中使用字符模板解决了这个问题,让你可以拼接字符串的时候用的更爽。

1
2
3
let name = "飞";
let lunch = "午饭";
let ask = `${name}您吃${lunch}吗?`; //您吃午饭了吗?

是不是优雅多了呢?

另外模板字符串还会记录空格、换行等字符:

1
2
3
4
5
6
7
let ask = `飞,
我今天,
饿
`

打印出来就是:

飞,
我今天,
好
饿
啊

再也不用各种空格符号和换行符号了。

标签模板

另外还有一个值得注意的地方,就是标签模板,即在“``”前面,将其变为一个函数。

1
functionName`${name},您吃${lunch}了吗?`

其实就等同于

1
functionName functionName(stringArr,...value){};

stringArr就是模板里的不变的值:“,您吃了吗?”
而…value就是里面的变量:${name} 和 ${lunch}.

书上和其他的blog上面都说是可以用做字符串检查,类似于

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function SaferHTML(templateData) {
var s = templateData[0];
for (var i = 1; i < arguments.length; i++) {
var arg = String(arguments[i]);
// Escape special characters in the substitution.
s += arg.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;");
// Don't escape special characters in the template.
s += templateData[i];
}
return s;
}
// 调用
var html = SaferHTML`<p>这是关于字符串模板的介绍</p>`;

能让你写的代码更优雅一些,算是字符串模板的拓展。

综上,实际使用的话,Unicode其实用的真的不多,但是字符串模板还是应该多关注下,能用尽量用,毕竟,使代码更优雅是每个程序员的最求。