ES6入门：模板字符串

一、模板字符串

const username1 = 'alex';const username2 = `alex`;
console.log(username1, username2, username1 === username2);
//alex alex true

二、模板字符串与一般字符串的区别

const person = {username: 'Alex',age: 18,sex: 'male'
};

一般字符串：

const info ='我的名字是：' +person.username +', 性别：' +person.sex +', 今年' +person.age +'岁了';
console.log(info);
//我的名字是Alex，性别：male，今年18岁了

模板字符串：

const info = `我的名字是：${person.username}, 性别：${person.sex}, 今年${person.age}岁了`;
console.log(info);
//我的名字是Alex，性别：male，今年18岁了

注意：
1.和其他东西一起使用的时候，使用模板字符串，方便注入
2.其他情况下使用模板字符串或一般字符串都行
三、模板字符串的注意事项
1、输出多行字符串
1)一般字符串：

const info = '第1行\n第2行';
// console.log(info);

结果：

第一行
第二行

2)模板字符串：

法一：const info = `第1行\n第2行`;
法二：const info = `第1行第2行`;    //这里前边有空格

输出结果：

法一：
第一行
第二行法二：
第一行第二行
//模板字符串中，所有的空格、换行或缩进都会被保留在输出之中

2.输出 ` 和 \ 等特殊字符

const info = `\`\\`;    //需要转义
console.log(info);     //`\一般字符：不需要转义
const info = `'`;
console.log(info);   //'

3.模板字符串的注入

const username = 'alex';
const person = { age: 18, sex: 'male' };
const getSex = function (sex) {return sex === 'male' ? '男' : '女';
};const info = `${username}, ${person.age},${getSex(person.sex)}`;
console.log(info);

结论：只要最终可以得出一个值的就可以通过 ${} 注入到模板字符串中

ES6入门：模板字符串相关推荐

深入浅出ES6：模板字符串（`和‘）
反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起 ...
正则表达式使用 ES6 的模板字符串
有时候可能需要使用动态的验证某个内容,所以如果正则表达式能够使用变量就好了,但是通过 /\w/ 这种方式声明的正则,是不能够使用模板字符串的.那么能够使用模板字符串的方式是使用 new 命令: let ...
如何解决IE11不兼容ES6的模板字符串
IE浏览器再词法分析阶段如果遇到ES6的模板字符串,就会抛出错误,导致程序无法正常运行. 这时候需要将ES6的模板字符串改写为普通的单引号或者是双引号来代替,如果只有多行字符串,就需要在换行处使用加号 ...
html 模板字符串,ES6：模板字符串
标签: 模板字符串 JavaScript ES6 前端 web 本博客版权归本人和饥人谷所有,转载需说明来源内容转载自阮一峰老师的ES6入门 1.基本用法传统的JavaScript语言,输出模板通 ...
ES6：模板字符串的简单使用
本来是个后端工程师,因为最近要做开源项目,还不会前端 TnT ,没办法只能一步步学啦.前端知识知之甚微,基本小白一个.em...顺便吐槽下自己也要往full stack的方向前进了. 好多东西不会,在 ...
ES6新特性_ES6模板字符串---JavaScript_ECMAScript_ES6-ES11新特性工作笔记007
然后我们再去看ES6中模板字符串的用法 1.ES6引入了一个模板字符串的概念,很好用通过`` 反引号来声明. 可以看到上面然后可以看到以前我们声明一个字符串太长的话,中间还得用+号拼接什么的比较麻 ...
深入浅出ES6（四）：模板字符串
作者 Jason Orendorff github主页 https://github.com/jorendorff 反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符 ...
后端字段为null，前端使用ES6模板字符串进行展示
项目需求:后端字段为null,前端使用ES6模板字符串展示为空未处理前效果: // ES6的模板字符串可写表达式<template #default="{ row }"&g ...
js 模板字符串转html,JS一行代码实现一个简单的模板字符串替换
同许多初学 Javascript 的菜鸟一样,起初,我也是采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中.开始时代码量较少,暂时还可以接受.但当页面结构复杂起来后,其弱点开始变得无法忍受起 ...
一行代码实现一个简单的模板字符串替换
作者:微醺岁月 https://segmentfault.com/a/1190000013516128 起始同许多初学 Javascript 的菜鸟一样,起初,我也是采用拼接字符串的形式,将 JSO ...

ES6入门：模板字符串

ES6入门：模板字符串

ES6入门：模板字符串相关推荐

最新文章

热门文章