es6模板字符串怎么写样式,ES6中的模板字符串改变html

es6模板字符串怎么写样式,ES6中的模板字符串改变html,ES6之模版字符串的具体使用

本文主要介绍ES6的模板字符串的具体使用。边肖认为这很好。现在分享给大家,给大家一个参考。来和边肖一起看看吧。

最近在项目中使用了ES6的模板字符串,这里总结一下。

1.之前,我们还可以使用JavaScript输出模板字符串,通常如下:

$('#result ')。追加(

他是b' person.name '/b ' ',我们希望知道他' person.age '。仅此而已

);

但是我们可以看到,这种传统的做法需要大量的“”(双引号)和“和”来拼接得到我们需要的模板。但是这样很不方便。

所以ES6中提供了模板字符串,用`(反引号)标记,变量用$ {}括起来。上述示例可以用模板字符串编写,如下所示:

$('#result ')。追加(

`他是b${person.name}/band我们想知道他的${person.age}。这就是全部

);

这就简单多了,我们不需要用很多''和来拼接字符串和变量。

2.当然,模板字符串可以引入变量,也可以不使用变量。如下所示:

“我是一个男人。”

“不管你做什么,

我信任你

3.我们也可以先定义变量,然后在模板字符串中嵌入变量:

var name=' zzw

` { name },无论您做什么,

我信任你

4.显然,由于反引号是模板字符串的标识,如果我们需要在字符串中使用反引号,我们需要对它们进行如下转义:

不管你做什么,

我信任你

5.注意:如果一个模板字符串被用来表示一个多行字符串,所有的空格和缩进将被保存在输出中!

console.log(`无论您做什么,

我信任你。

输出结果如下:

6.在$ {}中可以将任意JavaScript表达式放在花括号中,还可以执行操作和引用对象属性。

var x=88

var y=100

console.log(`x=${ x},y=$ { x y } `);

结果如下:

7.更强大:模板字符串还可以调用函数:

函数字符串(){

返回“zzw喜欢es6!”;

}

Console.log(`你想说什么?嗯,$ { string()} `);

结果如下:

此外,如果函数的结果不是字符串,它将根据一般规则转换为字符串:

函数字符串(){

返回666;

}

Console.log(`你想说什么?嗯,$ { string()} `);

结果如下:

这里,数字666实际上被转换成字符串666。

8.如果$ {}中没有命名变量,将会报告一个错误:

Console.log(`你想说什么?嗯,$ { string()} `);

在上面的代码中,没有声明string()函数,因此报告了一个错误:

9.其实我们也可以在$ {}中输入一个字符串,知识结果还是会返回一个字符串:

Console.log(`你想说什么?嗯,$ { '其实我不是变量~ ' } `);

结果如下:

10.如果你想引用模板字符串本身,你可以这样写:

let str='return ' ' `喂!$ { name } ` ';

let func=新函数(' name ',str);

console . log(func(' zzw '));

结果如下:

这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • es6语法菜鸟教程,babel转换es6原理
  • es6语法菜鸟教程,babel转换es6原理,利用babel将es6语法转es5的简单示例
  • ES6箭头函数,es6新特性箭头函数
  • ES6箭头函数,es6新特性箭头函数,关于ES6中的箭头函数超详细梳理
  • es6模板字符串怎么写样式,ES6中的模板字符串改变html,ES6之模版字符串的具体使用
  • es6数组扩展运算符,es6展开运算符,详解ES6 扩展运算符的使用与注意事项
  • es6定义数组,es6数组添加元素
  • es6定义数组,es6数组添加元素,ES6 新增的创建数组的方法(小结)
  • es6...运算符,es6 扩展运算符 三个点(...)
  • es6 变量的解构赋值,es5实现解构赋值,ES6 解构赋值的原理及运用
  • ,,es6数组的flat(),flatMap()函数用法实例分析
  • commonjs和es6的module的区别,ES6 Modules 相对于 CommonJS 的优势是什么-
  • es6数组和对象的方法,使用es6方式实现伪数组转数组
  • es6修改数组中的某一项,es6数组添加元素
  • es6 set内部实现,es6 set原理
  • 留言与评论(共有 条评论)
       
    验证码: