`` 反引号在前端的作用：模板字符串

在利用 React.js 开发网页的时候有没有用过一个很好用的组件叫 styled-components，styled-components 是一个用来产生元素样式的组件，让你可以在 JSX 中编写 css 达到 CSS-IN-JS 的技巧。

之前在使用 styled-components 的时候有发现明明要产生元素的 method 都是 function，可是在 styled-compoents 中却看不到任何 "平常" 会使用的 call function 技巧，后来仔细去看了 MDN 才知道原来这个是 ES6 新进的方法。

Template Strings

在开始讲 tagged template literal 时，必须要先讲一下 template strings，相信有在使用 ES6 的人都知道 template strings 是非常好用的方法，解决了以往组合字串上需要用冗长的加号不断的拼接。

// ES5
var myName = '前端Sky'
console.log("Hello " + myName + '!')
// 'Hello 前端Sky!'// ES6
const myName = '前端Sky'
console.log(`Hello ${myName}`)
// 'Hello 前端Sky!'

甚至 template strings 也可以利用 multi-line 的效果进而达到换行的效果。

// ES5
console.log('Hello\n' + '前端Sky')
// Hello
// 前端Sky// Es6
console.log(`
Hello
前端Sky
`)
// Hello
// 前端Sky

我们知道当字符串变得很长，用普通的拼接写法是很繁琐的，而且在插入一些javascript、template或者html template的时候，会写的很冗长。而且一步小心就会因为引号的缺失导致整个template报错。
这个时候，我们就要请出来我们今天要说的es6增加的模版字符串。

语法

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
最后我们用模版字符串改写一下上面的一些场景:

// 拼接变量
var inner = `这里有${count}个炒粉工`
// 换行
var _inner = `这里有<b>${count}</b>个炒粉工每天只知道吹水`
// 因为模版字符串外部为反引号，所以单双嵌套的场景还是比较少，如果在内部的字符串出现了单双嵌套规则还是和原来一致的。
// javascript template(百度埋点是比较常见的一个了)
var doc = document.body, hmc = document.createElement('script');
hmc.innerHTML = `var _hmt = _hmt || [];        (function() {           var hm = document.createElement("script");          hm.src = "https://hm.baidu.com/hm.js";           var s = document.getElementsByTagName("script")[0];     s.parentNode.insertBefore(hm, s);})();       `;
doc.appendChild(hmc);
// 嵌套反引号需要转义
var $r = `这里有\`${count}\`个炒粉工`
// 表达式
`${count} + ${count} = ${count * 2}` // 2 + 2 = 4
// 运行方法（默认会调用toString）
const $function = function(count) { return `这里有${count}个炒粉工` }
`其实, ${$function(count)}` // 其实，这里有2个炒粉工
// 模版字符串中调用模版字符串
var $$r = `你确定这里是${count > 0 ? `${count}个炒粉工` : '水军'}`

alert`123`
// 等同于
alert('123')

科普: ECMAScript 6.0(简称es6)

`` 反引号在前端的作用：模板字符串相关推荐

后端字段为null，前端使用ES6模板字符串进行展示
项目需求:后端字段为null,前端使用ES6模板字符串展示为空未处理前效果: // ES6的模板字符串可写表达式<template #default="{ row }"&g ...
[ 前端开发 ] ES6模板字符串
ES6模板字符串模板字符串是 ES6 的新特性,他的作用是减少了字符串的拼接操作,提高了程序的可读性接下来看一个栗子
JS 单引号、双引号与反引号的区别
文章目录 1.单引号&双引号 2.反引号参考文献每一个编程语言都有引号,但作用和用法略有区别.JS 也存在单引号.双引号与反引号,其用法与其他语言也有所区别. 1.单引号&双引号 ...
ES6：模板字符串的简单使用
本来是个后端工程师,因为最近要做开源项目,还不会前端 TnT ,没办法只能一步步学啦.前端知识知之甚微,基本小白一个.em...顺便吐槽下自己也要往full stack的方向前进了. 好多东西不会,在 ...
html 模板字符串,ES6：模板字符串
标签: 模板字符串 JavaScript ES6 前端 web 本博客版权归本人和饥人谷所有,转载需说明来源内容转载自阮一峰老师的ES6入门 1.基本用法传统的JavaScript语言,输出模板通 ...
ES6学习（模板字符串）
模板字符串传统的JavaScript语言,输出模板通常是这样写的. const name = 'Jack'; const age = 18; const sentence = name + ' is ...
用ES6中的模板字符串实现在字符串中添加变量和字符串换行
什么是模板字符串它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量. 例如: var str1 = '你好吗' +'李华';var str2 = `你好吗李华`;conso ...
vue 之模板字符串
传统的JavaScript语言,输出模板通常是这样的写的. 1 2 3 4 5 6 $('#result').append( 'There are <b>' + basket.cou ...
ES6 Template String 模板字符串
语法模板字符串(Template String)是增强版的字符串,用反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量. 用法 // 普通字符串 `In J ...

`` 反引号在前端的作用：模板字符串

Template Strings

语法

`` 反引号在前端的作用：模板字符串相关推荐

最新文章

热门文章