当前位置: 首页 > 编程笔记 >

深入浅出es6模板字符串

黄君博
2023-03-14
本文向大家介绍深入浅出es6模板字符串,包括了深入浅出es6模板字符串的使用技巧和注意事项,需要的朋友参考一下

本文主要介绍了深入浅出es6模板字符串,分享给大家,具体如下

作为前端开发者避免不了根据后台数据的返回,组装html,渲染页面。举个栗子

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

有时候还要给标签加一些属性,写起来很不方便,es6提供了模板字符串的方法,简化了这一过程

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


所有模板字符串的空格和换行,都是被保留的,如果你不想要前后换行,可以使用trim方法消除它。

在{}你可以写任意JavaScript表达式,包括调用函数

var x = 1;
var y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"
function fn() {
 return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

如果变量没有声明,会报错,如果{}中是一个字符串,则原样返回

// 变量place没有声明
var msg = `Hello, ${place}`;
// 报错
`Hello ${'World'}`
// "Hello World"

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • ES6引入了一种通过反引号( ` )标记的新的字符串文字类型。 这些字符串文字可以包括换行符,并且有一个新的机制用于将变量插入字符串:

  • 本文向大家介绍深入浅出ES6之let和const命令,包括了深入浅出ES6之let和const命令的使用技巧和注意事项,需要的朋友参考一下 let和const声明的变量只在代码块内有效 不存在变量提升 变量一定要在声明后使用,否则报错 不允许重复声明 块级作用域 const命令 声明一个只读的常量,一旦声明,常量的值就不能改变 一旦声明变量,就必须立即初始化,不能留到以后赋值 let命令、cons

  • 本文向大家介绍浅谈ES6 模板字符串的具体使用方法,包括了浅谈ES6 模板字符串的具体使用方法的使用技巧和注意事项,需要的朋友参考一下 写在前面 关于 ES6, 也终于在 2015 年的 7 月 18 号尘埃落定了。虽然说各大浏览器还没有全面的支持,不过这并不妨碍我们一颗想要撸一把的心。在后端,可以使用 Node.js(0.12+)或 io.js, 前端的话,也可以使用Babel 或Traceur

  • 本书从不同的视角介绍了 Node 内在的特点和结构。由首章Node 介绍为索引,涉及Node 的各个方面,主要内容包含模块机制的揭示、异步I/O 实现原理的展现、异步编程的探讨、内存控制的介绍、二进制数据。

  • Django简介 Django是一个高级的Python Web开发框架,它的目标是使得开发复杂的、数据库驱动的网站变得更加简单。 由于Django最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的。所以,我们可以发现在使用Django的很多网站里,都是用于作为CMS(内容管理系统)来使用的。使用Django的一些比较知名的网站如下图所示: 使用Django的网站 Django是一

  • 问题内容: 我有以下Ecma-Script-6代码 输出如下: 和 我已经能够在此处将字符串串联起来,那么使用模板文字的情形将是什么? 问题答案: 如果像问题示例中那样仅将模板文字与占位符(例如)一起使用,则结果与串联字符串相同。从主观上讲,它看起来更好并且更易于阅读,尤其是对于多行字符串或包含这两者的字符串,因为您不必再​​转义那些字符了。 可读性是一个很棒的功能,但是关于模板最有趣的是Tagg