浅聊：ES6模板字符串与一般字符串

既然我已经踏上这条路，那么，任何事情都不应该妨碍我沿着这条路走下去。 ----康德

一.模板字符串与一般字符串区别
二.模板字符串的一些注意事项

一.模板字符串与一般字符串区别

1，认识模板字符串:

<script>
'xiaozhang'       //一般字符串
`xiaozhang`       //模板字符串（用两个反引号裹着）
const username1 = 'xiaozhang';
const username2 = `xiaozhang`;console.log(username1,username2,username1 == username2);
//xiaozhang,xiaozhang,true
</script>

2，模板字符串与一般字符串的区别:

<script>
const person ={username:'小张',age:1,sex:'male'
};
//用一般字符串输出
const info = '我的名字：'+ person.username +',年龄：'+ person.age +'，岁了：'+ person.sex ;
console.log(info);//模板字符串输出：
const info = `我的名字：${person.username},今年:${person.age}岁了,性别：${person.sex}`;
</script>

从上我们可以看出一般字符串有时很不方便，需多个引号、加号连接，不利于程序员书写，而模板字符串很好的克服了这一点。
同时注意到：在模板字符串中嵌入变量时，需要将变量名写在${}中（后面讲）。

二.模板字符串的一些注意事项

1，输出多行字符串：

<script>
//一般字符串const info = '第1行\n第2行';console.log(info);    //第1行//第2行</script>

<script>
//模板字符串
const info = `第1行\n第2行`; //(方式一)
console.log(info);
//第1行
//第2行const info =`第1行
第2行`   //(方式二)
console.log(info);
//第1行
//第2行
</script>

模板字符串中，所有的空格、换行或缩进都会被保留在输出结果之中

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

<script>
const info =`\``;   //    \表示转义
console.log(info);  //  `const info1 = `\\`;    //  \表示转义
console.log(info1); //  \
</script>

3，模板字符串的注入
在模板字符串中嵌入变量时，需要将变量名写在${}中

<script>
//小案例：const username = 'xiaozhang';const person = {age:1,sex:'male'};const getSex = function(sex){return sex ==='male'?'男':'女';}const info = `${username},${person.age},${getSex(person.sex)}`;console.log(info);</script>

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

喜欢还请点个赞！
文中若有不足之处还请指出！

传送门：一篇文章带你走进箭头函数

浅聊：ES6模板字符串与一般字符串相关推荐

ES6中新增字符串方法，字符串模板
ES6中新增字符串方法,字符串模板多了两个新方法 startsWith endsWith 返回的是一个Boolean值 let str='git://www.baidu.com/2123123';i ...
高级JavaScript #ES6(模板字符串,let,箭头函数,forof,参数增强,解构,class,promise)
模板字符串 1.模板字符串: 只要拼接字符串都用模板字符串代替+a.整个字符串包裹在一对儿反引号 ` ` 中b.反引号``中支持换行 c.反引号中需要动态生成的内容必须放在${}里d. ${}里: ...
后端字段为null，前端使用ES6模板字符串进行展示
项目需求:后端字段为null,前端使用ES6模板字符串展示为空未处理前效果: // ES6的模板字符串可写表达式<template #default="{ row }"&g ...
[ 前端开发 ] ES6模板字符串
ES6模板字符串模板字符串是 ES6 的新特性,他的作用是减少了字符串的拼接操作,提高了程序的可读性接下来看一个栗子
ES6学习（三）—字符串的扩展
ES6学习(三)-字符串的扩展挑重点文章只列举了一部分完整版请看阮一峰ES6入门教程点我查看阮一峰ES6入门教程一.字符串的遍历接口 for-of- 遍历字符串和数组不可以遍历对象,遍历对 ...
es6 去掉空格_ES6之字符串
字符串方法去除首尾空格:trim() includes()方法:在给定文本存在于字符串中的任意位置时会返回 true ,否则返回 false: startsWith()方法:在给定文本出现在字符串起始 ...
php代码getsubstr,ThinkPHP 模板substr的截取字符串函数实例讲解
ThinkPHP 模板substr的截取字符串函数详解 ThinkPHP 模板substr的截取字符串函数在Common/function.php加上以下代码 /** ** 截取中文字符串 **/ ...
php字符串分割tp模板,ThinkPHP 模板substr的截取字符串函数详解
ThinkPHP 模板substr的截取字符串函数在Common/function.php加上以下代码 /** ** 截取中文字符串 **/ function msubstr($str, $star ...
php向前截取字符串函数,ThinkPHP 模板substr的截取字符串函数详解
ThinkPHP 模板substr的截取字符串函数在Common/function.php加上以下代码 /** ** 截取中文字符串 **/ function msubstr($str, $star ...

浅聊：ES6模板字符串与一般字符串

浅聊：ES6模板字符串与一般字符串相关推荐

最新文章

热门文章