ES6的全新特性:模板字符串
2015-12-09 17:10
537 查看
作为JavaScript的未来,ES6已经到来。作为已完成的标准,ES6带来了许多新特性使其在如今的web世界仍有竞争力。ES6的方方面面不一定全都适合你,本文集会简要介绍一些顺手且可行的新特性。
我编写JavaScript代码更喜欢使用单引号来定义字符串,而不是双引号。对JavaScript来说两者都可以,下面的两行代码其实作用相同:
var animal = "cow";
var animal = 'cow';
我更喜欢单引号是有原因的。首先,单引号在组合使用HTML字符串和引用属性时更加方便。
// with single quotes, there's no need to
// escape the quotes around the class value
var but = '<button class="big">Save</button>';
// this is a syntax error:
var but = "<button class="big">Save</button>";
// this works:
var but = "<button class=\"big\">Save</button>";
只有在 HTML 中使用单引号之时才需要转义,而HTML中是极少使用单引号的。我能想到的场景无非是内联 JavaScript 或 CSS,也就是说此时写的东西是靠不住的或者极度依赖标记语言。而在正文中,还不如使用排版更悦目的`‘`而不是单引号`'`。[^注: 也就是说不用转义了。]
旁注: 当然,HTML相当宽容,你大可以删除引号或者转而使用单引号来包裹属性,但是我宁愿写可读性更好的标记语言而不是过分依赖语法分析程序。如今的HTML5语法分析程序如此宽容是因为过去人们写的标记语言太糟糕了,这不是继续糟糕下去的借口。
在 DHTML 时代在框架集内部使用 document.writer 在新弹出窗口上创建文档之类的令人恶心的事情我已经受够了。我再也不要使用转义字符了。我甚至有时候还会用到三引号,这还是在编辑器有彩色高亮之前的事。简直是一团糟。
也就是说在 PHP 3 和 PHP 4 时代使用单引号的效率更高,因为语法分析程序省去了检索整个字符串进行变量替换的麻烦。看下面的例子你就明白了:
<?php $animal = 'cow';
$sound = 'moo';
echo 'The animal is $animal and its sound is $sound';
// => The animal is $animal and its sound is $sound
echo "The animal is $animal and its sound is $sound";
// => The animal is cow and its sound is moo
?>
JavaScript不支持字符串内的变量替换,所以不得不使用拼接字符串来代替。这显然太麻烦了,不得不频繁地在引文内和引文外来回切换。
var animal = 'cow';
var sound = 'moo';
alert('The animal is ' + animal + ' and its sound is ' +
sound);
// => "The animal is cow and its sound is moo"
// 这样写是不行的:
var list = '<ul>
<li>Buy Milk</li>
<li>Be kind to Pandas</li>
<li>Forget about Dre</li>
</ul>';
// 可以这样写,但是,呃
var list = '<ul>\
<li>Buy Milk</li>\
<li>Be kind to Pandas</li>\
<li>Forget about Dre</li>\
</ul>';
// 这是最常见的写法,但是,呃
var list = '<ul>' +
' <li>Buy Milk</li>' +
' <li>Be kind to Pandas</li>' +
' <li>Forget about Dre</li>' +
'</ul>';
模板字符串的设计天才之处在于使用了全新的字符串限定符,即在HTML和寻常文本中皆不常见的反引号(`)。
var animal = 'cow';
var sound = 'moo';
alert(`The animal is ${animal} and its sound is ${sound}`);
// => "The animal is cow and its sound is moo"
${} 接受任意的 JavaScript 表达式并返回相应值,可以用来进行数学运算或者访问对象的属性等等。
var out = `ten times two totally is ${ 10 * 2 }`;
// => "ten times two totally is 20"
var animal = {
name: 'cow',
ilk: 'bovine',
front: 'moo',
back: 'milk',
}
alert(`
The ${animal.name} is of the
${animal.ilk} ilk,
one end is for the ${animal.front},
the other for the ${animal.back}
`);
// =>
/*
The cow is of the
bovine ilk,
one end is for the moo,
the other for the milk
*/
第二个例子表明多行字符串再也不是个问题啦。
function urlify (str) {
return encodeURIComponent(str);
}
urlify `http://beedogs.com`;
// => "http%3A%2F%2Fbeedogs.com"
urlify `woah$£$%£^$"`;
// => "woah%24%C2%A3%24%25%C2%A3%5E%24%22"
// nesting also works:
var str = `foo ${urlify `&&`} bar`;
// => "foo %26%26 bar"
这样是能用是能用,却依赖于隐式的数组到字符串的强制转换。传递给函数的元素并不是字符串,而是字符串和值构成的数组。如果像上面这样使用,为了方便会被自动转换成字符串,但是正确的方法是直接访问数组成员。
function tag (strings, values) {
console.log(strings);
console.log(values);
console.log(strings[1]);
}
tag `you ${3+4} it`;
/* =>
Array [ "you ", " it" ]
7
it
*/
你还可以使用原始字符串的数组,这意味着可以获取字符串中的所有字符,这里说的「所有」是指包括控制字符[^注:非打印字符]。比如在添加换行时使用的 \n 就是控制字符。在字符串中只能得到两个空格,而在原始字符串中可以取得 \n 字符。
function tag (strings, values) {
console.log(strings);
console.log(values);
console.log(strings[1]);
console.log(string.raw[1]);
}
tag `you ${3+4} \nit`;
/* =>
Array [ "you ", " it" ]
7
it
\nit
*/
var templatestrings = false;
try {
new Function( "`{2+2}`" );
templatestrings = true;
} catch (err) {
templatestrings = false;
}
if (templatestrings) {
// …
}原文链接:http://www.gbtags.com/gb/share/9579.htm
我编写JavaScript代码更喜欢使用单引号来定义字符串,而不是双引号。对JavaScript来说两者都可以,下面的两行代码其实作用相同:
var animal = "cow";
var animal = 'cow';
我更喜欢单引号是有原因的。首先,单引号在组合使用HTML字符串和引用属性时更加方便。
// with single quotes, there's no need to
// escape the quotes around the class value
var but = '<button class="big">Save</button>';
// this is a syntax error:
var but = "<button class="big">Save</button>";
// this works:
var but = "<button class=\"big\">Save</button>";
只有在 HTML 中使用单引号之时才需要转义,而HTML中是极少使用单引号的。我能想到的场景无非是内联 JavaScript 或 CSS,也就是说此时写的东西是靠不住的或者极度依赖标记语言。而在正文中,还不如使用排版更悦目的`‘`而不是单引号`'`。[^注: 也就是说不用转义了。]
旁注: 当然,HTML相当宽容,你大可以删除引号或者转而使用单引号来包裹属性,但是我宁愿写可读性更好的标记语言而不是过分依赖语法分析程序。如今的HTML5语法分析程序如此宽容是因为过去人们写的标记语言太糟糕了,这不是继续糟糕下去的借口。
在 DHTML 时代在框架集内部使用 document.writer 在新弹出窗口上创建文档之类的令人恶心的事情我已经受够了。我再也不要使用转义字符了。我甚至有时候还会用到三引号,这还是在编辑器有彩色高亮之前的事。简直是一团糟。
在字符串中使用变量替换
我更喜欢单引号还有一个原因。在编写高性能要求的网站时候我会大量使用PHP,而PHP是区分单引号和双引号的。PHP的单引号不允许字符串内变量替换,而双引号允许。也就是说在 PHP 3 和 PHP 4 时代使用单引号的效率更高,因为语法分析程序省去了检索整个字符串进行变量替换的麻烦。看下面的例子你就明白了:
<?php $animal = 'cow';
$sound = 'moo';
echo 'The animal is $animal and its sound is $sound';
// => The animal is $animal and its sound is $sound
echo "The animal is $animal and its sound is $sound";
// => The animal is cow and its sound is moo
?>
JavaScript不支持字符串内的变量替换,所以不得不使用拼接字符串来代替。这显然太麻烦了,不得不频繁地在引文内和引文外来回切换。
var animal = 'cow';
var sound = 'moo';
alert('The animal is ' + animal + ' and its sound is ' +
sound);
// => "The animal is cow and its sound is moo"
多行字符串的麻烦
在处理越来越长的字符串,尤其是组合使用大量 HTML 的时候真的是麻烦异常。而且很可能到头来 Linting 工具会报错说行末的 + 后面有个多于的空格。这问题完全是因为JavaScript不支持多行字符串。// 这样写是不行的:
var list = '<ul>
<li>Buy Milk</li>
<li>Be kind to Pandas</li>
<li>Forget about Dre</li>
</ul>';
// 可以这样写,但是,呃
var list = '<ul>\
<li>Buy Milk</li>\
<li>Be kind to Pandas</li>\
<li>Forget about Dre</li>\
</ul>';
// 这是最常见的写法,但是,呃
var list = '<ul>' +
' <li>Buy Milk</li>' +
' <li>Be kind to Pandas</li>' +
' <li>Forget about Dre</li>' +
'</ul>';
客户端的模板解决方法
为了在搞定麻烦的JavaScript字符串处理和拼接问题,还是得走到老路上,写个库。现有的众多HTML模板库中,Mustache.js 大概是影响力最大的。这些库大都遵循自定的非标准语法,使用起来完全看心情。打个比方,这就像是你用markdown格式写东西,然后意识到”markdown”本身就有很多不同的意思。[注:markdown有众多风格]使用模板字符串
随着ES6及其标准的到来,我们欣喜地发现使用JavaScript处理字符串时可以使用模板字符串了。现在主流浏览器对模板字符串的支持非常及时:Chrome 44+, Firefox 38+, Microsoft Edge 和 Webkit 全部支持。遗憾的是 Safari 尚未支持,但是也不会等很久。模板字符串的设计天才之处在于使用了全新的字符串限定符,即在HTML和寻常文本中皆不常见的反引号(`)。
var animal = 'cow';
var sound = 'moo';
alert(`The animal is ${animal} and its sound is ${sound}`);
// => "The animal is cow and its sound is moo"
${} 接受任意的 JavaScript 表达式并返回相应值,可以用来进行数学运算或者访问对象的属性等等。
var out = `ten times two totally is ${ 10 * 2 }`;
// => "ten times two totally is 20"
var animal = {
name: 'cow',
ilk: 'bovine',
front: 'moo',
back: 'milk',
}
alert(`
The ${animal.name} is of the
${animal.ilk} ilk,
one end is for the ${animal.front},
the other for the ${animal.back}
`);
// =>
/*
The cow is of the
bovine ilk,
one end is for the moo,
the other for the milk
*/
第二个例子表明多行字符串再也不是个问题啦。
标签化的模板
还可以在模板字符串之前加上一个标签,用作函数名,可以调用这个函数而字符串就是参数。下面的例子实现了对返回的字符串进行编码生成URL,避免总是使用不友好的 namedencodeURIComponent。function urlify (str) {
return encodeURIComponent(str);
}
urlify `http://beedogs.com`;
// => "http%3A%2F%2Fbeedogs.com"
urlify `woah$£$%£^$"`;
// => "woah%24%C2%A3%24%25%C2%A3%5E%24%22"
// nesting also works:
var str = `foo ${urlify `&&`} bar`;
// => "foo %26%26 bar"
这样是能用是能用,却依赖于隐式的数组到字符串的强制转换。传递给函数的元素并不是字符串,而是字符串和值构成的数组。如果像上面这样使用,为了方便会被自动转换成字符串,但是正确的方法是直接访问数组成员。
在模板字符串中检索字符串和值
在标签函数内部,不仅可以使用完整字符串,还可以只使用字符串的一部分。function tag (strings, values) {
console.log(strings);
console.log(values);
console.log(strings[1]);
}
tag `you ${3+4} it`;
/* =>
Array [ "you ", " it" ]
7
it
*/
你还可以使用原始字符串的数组,这意味着可以获取字符串中的所有字符,这里说的「所有」是指包括控制字符[^注:非打印字符]。比如在添加换行时使用的 \n 就是控制字符。在字符串中只能得到两个空格,而在原始字符串中可以取得 \n 字符。
function tag (strings, values) {
console.log(strings);
console.log(values);
console.log(strings[1]);
console.log(string.raw[1]);
}
tag `you ${3+4} \nit`;
/* =>
Array [ "you ", " it" ]
7
it
\nit
*/
结论
模板字符串是ES6引入的超赞小特性,现在就可以使用。如果需要支持更老旧的浏览器,当然还可以把 ES6 转换编译 [注:transpile] 回 ES5。还可以针对模板字符串做一下特性检测,使用诸如 featuretests.io 的库,或者用下面的代码:var templatestrings = false;
try {
new Function( "`{2+2}`" );
templatestrings = true;
} catch (err) {
templatestrings = false;
}
if (templatestrings) {
// …
}原文链接:http://www.gbtags.com/gb/share/9579.htm
相关文章推荐
- 树莓派python,tornado,返回json数据代码,初级网络编程。
- appcompat_v7 dont R linux ubuntu
- Comparator 与 Comparable
- hadoop推荐
- Mybatis批量删除
- 管理SELINUX
- xcode6.4 7.2下载地址
- Java Serializable(序列化)的理解和总结、具体实现过程
- 游标
- linux安装usb wifi接收器
- Linux脚本EOF
- hadoop相关整理
- iOS框架——I&J&L字头
- leetcode -- Integer to English Words -- 无聊题目,很麻烦,再做一遍
- Java--流重点总结初稿
- Android 答题系统源码,答题demo(第六周)
- iOS CocoaPods 快速导入
- 【转】Javascript DI!Angular依赖注入的实现原理
- 如何将一个用utf-8编码的文本用java程序转换成ANSI编码的文本
- 获取当前url并指定url中的字符 效果