文档章节

es6字符串拼接

王尼尼
 王尼尼
发布于 2017/07/28 11:06
字数 409
阅读 19
收藏 0
es6
/**
 * Before ES6 字符串拼接
 */

原生写法

var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
var html = function(name, desc){
    var tpl = '公司名:' + name + '\n'+
            '简介:'+ desc;
    return tpl;
}


es6写法

var html = `公司名:${name} 简介:${desc}`;

标签模板(tagged template)

为此,引出了标签模板的概念。标签模板则是在反引号前面引入一个标签(tag)。该标签是一个函数,用于处于定制化模板字符串后返回值。就拿上面对特殊字符串举例。

/**
 * HTML 标签转义
 * @param {Array.<DOMString>} templateData 字符串类型的tokens
 * @param {...} ..vals 表达式占位符的运算结果tokens
 * 
 */
function SaferHTML(templateData) {
  var s = templateData[0];
  for (var i = 1; i < arguments.length; i++) {
    var arg = String(arguments[i]);
    // Escape special characters in the substitution.
    s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");
    // Don't escape special characters in the template.
    s += templateData[i];
  }
  return s;
}
// 调用
var html = SaferHTML`<p>这是关于字符串模板的介绍</p>`;

标签函数会接收多个参数。

  • 第一个参数是包含了字符串字面量(即那些没有变量替换的值)的数组
  • 后面的参数是已经替换后的变量值

改一下例子1

var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
tag`公司名:${name}简介:${desc}`

tag 的参数则分别为 ['公司名:','简介:'], '丁香医生', '丁香医生是面向大众的科普性健康类网站'。

有了此类方法,就大大的增加了控制的权利。如上面说的国际化库甚至循环语句。

© 著作权归作者所有

上一篇: 数据库 test08
王尼尼
粉丝 0
博文 8
码字总数 3249
作品 0
苏州
私信 提问
2017.11.24-学习笔记:篇三之es6字符串的扩展

es6 中对字符串的操作又进行了一定的扩展 →点我去看基本的字符串方法 1.includes、startsWith、endsWith includes(): 返回布尔值, 表示是否找到了参数字符串。 以前判断字符串中是否存在某...

演员小新
2017/11/24
0
0
es6 模板字符串

es6 新的特殊支持嵌入表达式,自动会处于内所有的字符串。 多行字符串 表达式插入 传统的方式采用的是字符串拼接的方式进行,通过+号进行拼接 带标签的模板字符串 通过传入的参数来返回一个函...

罗布V
2016/11/01
2
0
JS动态写入HTML代码《变量,方法,函数多个入参拼接》

写这篇文章,主要是想mark一下,因为JS动态生成HTML(这里都默认是生成大段的HTML,而不是简单的标签元素),常用的两种语法格式: 一种是es6的写法,反撇,' ',在英文语法输入状态下,esc...

浅笑安然-rr
2018/06/12
0
0
如何用javascript实现一个模板引擎

模板引擎简介 模板引擎是html渲染必不可少的工具,前端开发的同学经历了从最原始的字符串拼接、用数组push/join,发展到封装简单的string.format函数,再到功能更加强大的模板引擎,可以在模...

windyfancy
05/06
0
0
如何写出优雅的Javascript代码

笔者以前写Javascript的时候,经常会把代码写的又臭又长又啰嗦。在经过一段实践的实践和反思后,代码的优雅性提高很多。 不写分号 不写分号能显著让代码更加优雅,并少轻松你的双手。 可能很...

鸟栖沙岩
2016/09/21
72
0

没有更多内容

加载失败,请刷新页面

加载更多

抽离css以及公共js

分离css 分离css:为何要把 CSS 文件分离出来,而不是直接一起打包在 JS 中。最主要的原因是我们希望更好地利用缓存。 extract-text-webpack-plugin > 1. 假设我们原本页面的静态资源都打包成...

莫西摩西
51分钟前
1
0
面向对象的7大原则

https://blog.csdn.net/u010355144/article/details/44940171

南桥北木
今天
2
0
Jenkins的配置从节点中默认没有Launch agent via Java Web Start,该如何配置使用

Jenkins的配置从节点中默认没有Launch agent via Java Web Start,如下图所示,而这种启动方式在Windows上是最方便的。 如何设置才能让出来呢? 1:打开"系统管理"——"Configure Global Sec...

shzwork
今天
2
0
BAT面试必问HashMap源码分析

HashMap 简介 HashMap 主要用来存放键值对,它基于哈希表的Map接口实现,是常用的Java集合之一。 JDK1.8 之前 HashMap 由 数组+链表 组成的,数组是 HashMap 的主体,链表则是主要为了解决哈...

别打我会飞
今天
13
0
RISC-V双周简报0x1f:一晚上写个RISC-V处理器玩玩(2018-09-01)

https://cnrv.io/bi-week-rpts/2018-09-01 https://blog.csdn.net/zoomdy/article/details/82914730...

whoisliang
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部