ES6模板字符串

看了阮老师的ES6入门再加上自己的一些理解整理出的学习笔记

介绍:

样子: `` 反引号,tab上面的那个键,同该符号包裹的字符串能够带来的功能如下:

  • 可以包涵换行

    • 在反引号以内,可以有多个换行,都能够在使用的时候被识别
  • 可以嵌入变量
    • 使用美元符号和大括号包裹变量${对象名.属性名}
  • 可以原生输出 
    • 原生输出包含转义字符串的内容String.raw模板字符串

例子:

  • 传统的JavaScript语言,输出模板通常是这样写的,字符串拼接很让人头疼,也很容易出错。
$(‘#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!
`);
  • 如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。
$(‘#list‘).html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);
  • 模板字符串中嵌入变量,需要将变量名写在${}之中。(注:不声明会报错)
let name = ‘jim‘,
     age = 18,
     gender = ‘male‘;
console.log(`name : ${name} , age : ${age} , gender : ${gender}`)
  • 大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性,而且还能调用函数
let x = 1,
    y = 2;
console.log(`${x} + ${y * 2} = ${x + y * 2}`)//  "1 + 4 = 5"

let obj = {x: 1, y: 2};
console.log(`${obj.x + obj.y}`)//  3

function fn() {
    return "Hello World";
        }
console.log(`foo ${fn()} bar`)// foo Hello World bar
  • 模板字符串还可以嵌套
const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join(‘‘)}
  </table>
`;

感谢观看!

最后安利阮老师的ES入门 : http://es6.ruanyifeng.com/#docs/string

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

ES6模板字符串的相关文章

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

es6 模板字符串

1.反引号模板,可以换行 2.反引号模板,可以嵌套 用+``来嵌套 好处:语法更加简洁 var name="123456一堆返回的数据" var desc="title内容"; var tpl=` <div> <span>${name}</span> </div> `; console.log(tpl); /*<div> <span>123456一堆返回的数据</span> <

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