美文网首页
ES6-模板字面量

ES6-模板字面量

作者: 清风昙 | 来源:发表于2022-03-01 22:18 被阅读0次

ES引入模板字面量(Template Literals),对字符串的操作进行了增强。

  • 多行字符串:真正的多行字符串
  • 字符串占位符:可以将变量或js表达式嵌入占位符

1.多行字符串
模板字面量的基础语法是用反引号(`)替换字符串的单、双引号。如:

let msg = `hello world`

如果想在字符串中使用反引号,用反斜杠(\)将它转义即可。如:

let msg = `hello \` world`

在ES6中使用模板字面量语法,很方便地实现多行字符串地创建,想在字符串中添加新的一行,只需要在代码中直接换行就行。如:

let msg = `hello
world`
console.log(msg)
// 输出结果
hello
world

2.字符串占位符
在模板字面量中,可以将js变量或合法的js表达式嵌入占位符并将其作为字符串的一部分输出来。占位符由一个左侧的"${"和右侧的"}"符号组成,中间可以包含变量或js表达式。如:

let name = '张三'
let msg = `hello ${name}`
console.log(msg)
// 输出: hello 张三

模板字面量自身也是js表达式,因此可以在模板字面量中嵌入另一个模板字面量。如:

let name = '张三'
let msg = `hello ${`my name is ${name}`}`
console.log(msg)  // 输出:hello my name is 张三

相关文章

  • ES6-模板字面量

    ES引入模板字面量(Template Literals),对字符串的操作进行了增强。 多行字符串:真正的多行字符串...

  • ES6系列 (三)模板字面量

    特性 模板字面量实现字符串插值 模板字面量实现多行字符串 模板字面量实现可重用的模板 理解标记模板字面量如何自定义...

  • 模板字面量类型

    作用:减少 ts 重复代码 上面两个 type 里面的 left right top bottom 都是重复代码 ...

  • ES6-对象字面量的扩展

  • ES6-对象字面量语法扩展

    对象字面量(Object Literals)是js中创建对象的一种方法,在ES6中通过如下语法,让对象字面量变得更...

  • 在Vue.js中定义组件模板的七种方式

    vue 至少有7种定义组件模板的方法: 字符串 模板字面量 X-Templates 内联模板 渲染方法(Rende...

  • 模板字符串

    模板字面量/Template literals 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功...

  • 字面量

    字面量: 1、数字字面量: 1.1、整数: 10进制:普通数字就是十进制 8进制:以0开头(...

  • 字面量

  • 字面量

    字面量 常见字面量的默认类型 可以通过typealias修改字面量的默认类型 swift自带类型之所以能够通过字面...

网友评论

      本文标题:ES6-模板字面量

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