专栏首页JetpropelledSnakeVue学习笔记之Vue的模板字符串

Vue学习笔记之Vue的模板字符串

0x00 模板字符串

传统的JavaScript语言,输出模板通常是这样的写的。

1 $('#result').append(
2   'There are <b>' + basket.count + '</b> ' +
3   'items in your basket, ' +
4   '<em>' + basket.onSale +
5   '</em> are on sale!'
6 );

上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。

1 $('#result').append(`
2   There are <b>${basket.count}</b> items
3    in your basket, <em>${basket.onSale}</em>
4   are on sale!
5 `);

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。

let greeting = `\`Yo\` World!`;

输入结果:`Yo` World!

如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Prometheus监控学习笔记之容器监控Grafana模块

    Grafana 是一个开源的,可以用于大规模指标数据的可视化项目,甚至还能对指标进行报警。基于友好的 Apache License 2.0 开源协议,目前是pr...

    Jetpropelledsnake21
  • 有道云笔记配合MPic+七牛云 自制MarkDown文档图床

    一直用有道云笔记,粘贴图片,做笔记没问题,另外有道云笔记还支持MarkDown,可以直接同步备份。

    Jetpropelledsnake21
  • 硬件笔记之GP106-90 3GB GTX1060 3GB魔改

    最近比特币又破万了,狂潮有来了;各个显卡坐地起价,价格上扬30%的大批,再加上暑期,这价格估计一时半会下不来了;

    Jetpropelledsnake21
  • Python数据类型之字符串第三季

    Python字符串的格式化 大家可能也已经看到了 字符串在本系列课程中 常老师已经和大家一起探讨了好几节课了 何时为什么呢?? 大家别嫌磨叽(同音可能不同字)啊...

    企鹅号小编
  • [Oracle ASM全解析] 管理磁盘组模板

    7-5 为冗余属性的值和磁盘组冗余级别的对应关系,有MIRROR,HIGH,UNPROTECTED三种

    bsbforever
  • 【ES6基础】模板字符串(Template String)

    模板字符串是ES6中非常重要的一个新特性,这个特性使得我们处理相关业务变得更加容易。比如在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用...

    前端达人
  • 【ES6基础】模板字符串(Template String)

    模板字符串是ES6中非常重要的一个新特性,这个特性使得我们处理相关业务变得更加容易。比如在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用...

    前端达人
  • Java 中检查空字符串(null或空白)的方法有几种?

    来源:https://www.toutiao.com/i6713087515768652301

    一个优秀的废人
  • 写给新手的Mysql入门指南(二)

    ALTER TABLE t1 ALTER age SET DEFAULT 20;

    Wizey

扫码关注云+社区

领取腾讯云代金券