编程 Javascript

ES6学习教程之模板字符串详解

Posted in Javascript onOctober 09, 2017

模板字符串(template strings)

ES6 中引进的一种新型的字符串字面量语法 - 模板字符串。书面上来解释，模板字符串是一种能在字符串文本中内嵌表示式的字符串字面量。简单来讲，就是增加了变量功能的字符串。

ES6为我们提供了模板字符串，语法使用反引号`。模板字符串具有以下三个优点：

多行文本
字符串中插入变量
字符串中插入表达式

基本语法

模板字符串和 ES5的字符串的声明一样。

// ES5
var name = 'xixi';
console.log(name);// xixi

// ES6
let name4ES6 = `一步`;
console.log(name4ES6);// 一步

多行文本

在Jquery 盛行的年代，我们经常会拼接 html 片段再进行节点替换。写一段 ES5的代码大家体会一下：

var str = '<html>'
+ '<div>啦拉拉</div>'
+ '<div>xixixi</div>'
+ '</html>';
console.log(str);// <html><div>啦拉拉</div><div>xixixi</div></html>

ES6支持多行文本，上面的代码实现起来就容易多了。

let str4ES6 = `<html>
 <div>啦拉拉</div>
 <div>xixixix</div>
</html>`;

console.log(str4ES6);

可以插入变量或表达式

// ES5
var name = 'xixi';
var age = 27;
var info = 'my name is ' + name + ' , age is ' + age + '.';
console.log(info);// my name is xixi , age is 27.

ES6的模板字符串实现起来就容易好多。关键语法${}，其中可以插入任何的 js 表达式。

let name = 'xixi';
let age = 27;

let info = `my name is ${name}, my age is ${age}. just a test ${1 + 10}!`;
console.log(info);// my name is xixi, my age is 27. just a test 11!

总结

ES6模板字符串就是这么的简单这么的好用。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对三水点靠木的支持。

ES6学习教程之模板字符串详解

- Author -

一?i

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

慎用 somefunction.prototype 分析

Jun 02 Javascript

JavaScript var声明变量背后的原理示例解析

Oct 12 Javascript

Node.js 异步编程之 Callback介绍（一）

Mar 30 Javascript

JQuery实现的图文自动轮播效果插件

Jun 19 Javascript

详解在Angularjs中ui-sref和$state.go如何传递参数

Apr 24 Javascript

JS设置手机验证码60s等待实现代码

Jun 14 Javascript

判断滚动条滑到底部触发事件(实例讲解)

Nov 15 Javascript

webpack配置导致字体图标无法显示的解决方法

Mar 06 Javascript

vue的安装及element组件的安装方法

Mar 09 Javascript

微信小程序错误this.setData报错及解决过程

Sep 18 Javascript

详解ES6 CLASS在微信小程序中的应用实例

Apr 24 Javascript

js实现右键弹出自定义菜单

Sep 08 Javascript

ES6学习教程之块级作用域详解

Oct 09 #Javascript

JavaScript实现短信倒计时60s

Oct 09 #Javascript

ES6学习教程之对象字面量详解

Oct 09 #Javascript

AngularJS中的路由使用及实现代码

Oct 09 #Javascript

React如何利用相对于根目录进行引用组件详解

Oct 09 #Javascript

React Native中的RefreshContorl下拉刷新使用

Oct 09 #Javascript

JS实现的全排列组合算法示例

Oct 09 #Javascript