es6 模板字符串

1、反引号模板,可以换行

2、反引号模板,可以嵌套

用+``来嵌套

好处:语法更加简洁

        var name="123456一堆返回的数据"
        var desc="title内容";
        var tpl=`
        <div>
            <span>${name}</span>
        </div>
        `;
        console.log(tpl);
        /*<div>
        <span>123456一堆返回的数据</span>
        </div>*/
        var tpl2=`
        <div>
        <span>${name +`<strong>${desc}</strong>`}</span>
        </div>
        `;
        console.log(tpl2);
        /*<div>
         <span>123456一堆返回的数据<strong>title内容</strong></span>
         </div>*/

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/6919746.html有问题欢迎与我讨论,共同进步。

时间: 2024-10-14 20:39:10

es6 模板字符串的相关文章

ES6模板字符串

看了阮老师的ES6入门再加上自己的一些理解整理出的学习笔记 介绍: 样子: `` 反引号,tab上面的那个键,同该符号包裹的字符串能够带来的功能如下: 可以包涵换行 在反引号以内,可以有多个换行,都能够在使用的时候被识别 可以嵌入变量 使用美元符号和大括号包裹变量${对象名.属性名} 可以原生输出  原生输出包含转义字符串的内容String.raw模板字符串 例子: 传统的JavaScript语言,输出模板通常是这样写的,字符串拼接很让人头疼,也很容易出错. $('#result').appen

ES6 模板字符串Template String

1. 模板字符串简介: 顾名思义,模板字符串是用来定义一个模板是使用的,就像Vue,React中的template语法. 首先,先来了解一下template string的基本用法: 在ES5中,我们大多都有过拼串的经历吧. const person = { name: 'zhang', age: 18, hobby: 'coding', introduce () { console.log('hello, everyone , my name is ' + this.name + ', I a

201704221048_《ES6模板字符串》

const tmpl = addrs => ` <table> ${addrs.map(addr => ` <tr><td>${addr.first}</td></tr> <tr><td>${addr.last}</td></tr> `).join("")} </table> `; const data = [ { first: "<Jan

ES6的全新特性:模板字符串

作为JavaScript的未来,ES6已经到来.作为已完成的标准,ES6带来了许多新特性使其在如今的web世界仍有竞争力.ES6的方方面面不一定全都适合你,本文集会简要介绍一些顺手且可行的新特性. 我编写JavaScript代码更喜欢使用单引号来定义字符串,而不是双引号.对JavaScript来说两者都可以,下面的两行代码其实作用相同: var animal = "cow"; var animal = 'cow'; 我更喜欢单引号是有原因的.首先,单引号在组合使用HTML字符串和引用属

ES6中模板字符串的使用

要把多个字符串连接起来,可以用"+"号连接: var name = '张三'; var sex = '男';var age= 18; var message = '姓名:'+name + ',性别:' + sex +',今年' + age + '岁了!'; alert(message); ES6新增了一种模板字符串,表示方法和上面的多行字符串一样,但是它会自动替换字符串中的变量: var name = '张三'; var age = 18; alert(`姓名:${name}, 年龄:

ES6新特性之模板字符串

ES6新特性概览  http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串   http://www.infoq.com/cn/articles/es6-in-depth-template-string

深入浅出ES6(四):模板字符串

作者 Jason Orendorff  github主页  https://github.com/jorendorff 反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起来与普通字符串并无二致.在最简单的情况下,它们与普通字符串的表现一致: context.fillText(`Ceci n'est pas une chaîne.`, x, y); 但是我们并

ES6新语法之---对象字面量扩展、模板字符串(5)

这节课学习ES6中对象字面量扩展和新增模板字符串 第一部分:对象字面量扩展 1.简洁写法 ES6对于对象字面量属性提供了简写方式. 1.1:属性简写 //传统写法 var x = 2, y = 3, o = { x: x, y: y }; //ES6简洁写法 var x = 2, y = 3, o = { x, //属性名和赋值变量名相同时,可简写 y }; 1.2:方法简写 //传统写法 var o = { x: function() { //... }, y: function() { //

ES6多行字符串+模板字符串

多行字符串 最新的ES6标准新增了一种多行字符串的表示方法,用反引号 ` ... ` 表示: 'use strict'; // 如果浏览器支持模板字符串,将会替换字符串内部的变量: var name = '小明'; var age = 20; console.log(`你好, ${name}, 你今年${age}岁了!`); 如果有很多变量需要连接,用+号就比较麻烦.ES6新增了一种模板字符串,表示方法和上面的多行字符串一样,但是它会自动替换字符串中的变量: var name = '小明'; v