美文网首页
2019-08-03 ES6新特性模板字符串 ${}的灵活使用

2019-08-03 ES6新特性模板字符串 ${}的灵活使用

作者: 本泽锅 | 来源:发表于2019-08-03 11:13 被阅读0次

大家好我本泽锅又来了,这次来讲讲ES6的模板字符串

首先来理解下概念
之前做字符串的拼接
以前的写法

var a = 'hellow world'
var b = '你好' + '"' + a + '"'
console.log(b)

打印结果:你好"hellow world"

 var a = 'hellow world'
  //   var b = '你好' + '"' + a + '"'
 var b = `你好${a}`
console.log(b)

打印结果:你好"hellow world"
这种写法简洁了很多,不用在拼接+ “ ” '' 诸如此类的,这就是es6的模版字符串写法

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。变量的获取方式是${varName},使得字符串模板定义简单化。

还有其他一些特性
如果使用模版字符串输出多行字符串,所有的空格和缩进都会被保存在输出中

console.log(`你好\` how are you,

I am fine.
                               。。。。
谢谢`)

打印结果
你好` how are you,

I am fine.
。。。。
谢谢

在${}中的大括号里可以放入任意的JavaScript表达式,及引用对象属性(类似Spring SpEL表达式),还可以进行运算。

var x=100;
var y=123;
console.log(`x=${x++},y=${x+y}`);

打印结果
x=100,y=224

相关文章

  • ES6常用新特性

    ES6新特性介绍 模板字符串 模板字符串实现字符串拼接 模板字符串实现多行字符串 结构赋值 对象的解构赋值 数组的...

  • ES6为字符串String,Number带来的新特性

    新特性:模板字符串 以前的方式 ES6方式 对比两段拼接的代码,模板字符串使得我们不再需要反复使用双引号(或者单引...

  • 2019-08-03 ES6新特性模板字符串 ${}的灵活使用

    大家好我本泽锅又来了,这次来讲讲ES6的模板字符串 首先来理解下概念之前做字符串的拼接以前的写法 打印结果:你好"...

  • ES6在企业中的应用

    模板字符串 解构赋值解构赋值最常用的在于函数。 数组spread es6浅拷贝 函数新特性之箭头函数 函数新特性之...

  • es6字符串的扩展

    es6对字符串做了很多的扩展,下面简单介绍一下。特性: 模板字符串,用反引号(`)标识。它可以当作普通字符串使用,...

  • 记一次滴滴前端面试题以及补充相关前端复习

    1.讲讲es6的新特性 const,let,class,箭头函数,Promise,字符串模板 - 块级作用域的es...

  • ES6,ES7,ES8,ES9,ES10新特性

    ES6新特性 一些常用新特性 类 模块化 箭头函数 函数参数默认值 模板字符串 解构赋值 延展操作符 对象属性简写...

  • js中模板字符串的使用

    es6中增加了模板字符串,使字符的操作更加灵活和解决复杂的问题。语法:使用反引号( ` )来包裹普通字符串。如: ...

  • ES6对字符串的拓展(2018-04-18)

    新特性:模板字符串 “模板字符串”是字符串的一个新特性,传统的字符串实现拼接的时候,要将变量插入字符串中,语法...

  • ES6之字符串的扩展(下)

    上一节中,我们学习了模板字符串和标签模板,这一节,我们接着来看一下ES6还对字符串添加了哪些新特性。 repeat...

网友评论

      本文标题:2019-08-03 ES6新特性模板字符串 ${}的灵活使用

      本文链接:https://www.haomeiwen.com/subject/fitjdctx.html