1.模板字符串的扩展

1.1传统的Jquery方法

 <div class="content"></div><script>let name = "张三"let age = "18"$(function () {$(".content").append(// 如果是两个变量还好，如果是多个变量那么会很复杂'我的名字是' + name + '年龄是' + age + '岁')})

1.2模板字符串模板字符串用法

  $(function () {$(".content").append(// 用反引号标识,在Tab键上面`我的名字是${name}年龄是${age}岁`)})

1.3如果在模板字符串还要使用反引号，那么要进行转义

      let content1 = `我的名字是\`天王盖地虎\`,所向披靡`console.log(content1); //我的名字是`天王盖地虎`,所向披靡

//我的名字是`天王盖地虎`,所向披靡

1.4 模板字符串表示多行字符串，所有空格和缩进都会被保留

   let content2 = `我是的名字是`console.log(content2);

// 我是

// 的名字

// 是

1.5 大括号可以放入任意的JavaScript表达式

        let number1 = 10let count1 = `${number1 * 10}`console.log(count1); //100let count2 = `${number1 === 10}`console.log(count2); //true

1.6模板字符串还能调用函数

         function fun1() {return 1}let count3 = `${fun1()}`console.log(count3);  //1

1.7大括号中是一个对象，那么会调用toStirng方法

         const content3 = "李四"let count4 = `${obj}`let count5 = `${content3}`console.log(typeof count4); //stringconsole.log(count5);// 李四

1.8如果需要引用模板字符串本身，在需要时执行，可以写成函数

          let fun2 = (name1) => `我的名字是${name1}`console.log(fun2("麻子")); //我的名字是麻子

2.标签模板

说明：标签是函数调用的一种特殊的形式。标签指的就是函数，紧跟在后面的模板字符串就是它的参数。

        const content4 = alert`hello`console.log(content4);  //等价于alert(['hello'])

alert具有“标签模板”功能,console.log没有

1.1例子

      let name8="天罡星"let name9="地煞星"function tag(array,...value){console.log(array[0]); //Helloconsole.log(array[1]); //,helloconsole.log(value);  //['天罡星', '地煞星']}tag`Hello${name8},heelo${name9}`

// 说明：第一个参数是个数组,里面是是模板字符串中没有变量替换的值,变量替换只发生在数组的第一个成员和第二个成员之间，依次类推。

ES6模板字符串的扩展相关推荐

后端字段为null，前端使用ES6模板字符串进行展示
项目需求:后端字段为null,前端使用ES6模板字符串展示为空未处理前效果: // ES6的模板字符串可写表达式<template #default="{ row }"&g ...
[ 前端开发 ] ES6模板字符串
ES6模板字符串模板字符串是 ES6 的新特性,他的作用是减少了字符串的拼接操作,提高了程序的可读性接下来看一个栗子
重学ES6 模板字符串
在两三年前,jQuery还是比较主流的开发技术,当我们要为页面添加DOM时,一般,我们是这样写的 $("#container").append('Today is <b> ...
ES6模板字符串【${}配合反单引号一起用】
转自: https://www.cnblogs.com/shihuc/p/10238511.html 先看看JavaScript中两个字符串的效果,就很容易知道模板字符串是个啥东西,其实一点也不新鲜. ...
[ES6] 细化ES6之 -- 字符串的扩展
判断是否包含都区分大小写 includes()方法返回布尔值,表示是否找到了参数字符串 let str = 'hebei baodingshi lianchiqu' console.log(str ...
高级JavaScript #ES6(模板字符串,let,箭头函数,forof,参数增强,解构,class,promise)
模板字符串 1.模板字符串: 只要拼接字符串都用模板字符串代替+a.整个字符串包裹在一对儿反引号 ` ` 中b.反引号``中支持换行 c.反引号中需要动态生成的内容必须放在${}里d. ${}里: ...
ES6 模板字符串 ``
参考原文链接 1. 使用JavaScript输出字符串,通常是下面这样的: console.log("He is <b>"+person.name+"< ...
es6模板字符串中标签模板作为参数时产生空元素的问题
当模板字符串作为标签模板使用时,标签函数接受到的参数分别为(arr,-values) arr:模板字符串中所有那些没有变量替换的部分 -values:各个变量替换后的值即 let a = 'Oh!' ...
es6模板字符串中循环遍历数据踩坑
应该很少有这种需求,需要在模板字符串利循环遍历数据,现在框架都有自己模板语法. 我这里踩的坑是,我在模板字符串中用forEach,map遍历循环时,返回值一直是一个undefined 用for循环re ...

ES6模板字符串的扩展

1.模板字符串的扩展

1.1传统的Jquery方法

1.2模板字符串模板字符串用法

1.3如果在模板字符串还要使用反引号，那么要进行转义

1.4 模板字符串表示多行字符串，所有空格和缩进都会被保留

1.5 大括号可以放入任意的JavaScript表达式

1.6模板字符串还能调用函数

1.7大括号中是一个对象，那么会调用toStirng方法

1.8如果需要引用模板字符串本身，在需要时执行，可以写成函数

2.标签模板

1.1例子

ES6模板字符串的扩展相关推荐

最新文章

热门文章