前言

es的模板字符，也就是定义了块的概念。

模板字符的二个条件:

1.必须在``中,这个`不是单引号而是反单引号，是tab的上面一个。

2.在#{}中，这个就有点意思了，里面不像后台的块级，在这里不可以去命名，只能是一个输出块，可以理解为一行语句 retrun {此处是要编译的代码}。

正文

来感受一下:

<script>

	  //调用了map方法，返回一个数组，后调用join将数组内的item用空字符连接起来，然后构成了一个字符串  //对<>进行转义   //对<>进行转义

	const temp1 = addrs => `

	  <table>

	  ${addrs.map(addr=>`<tr><td>

	  ${zhuanyi(addr.first)}</td><td>

	  ${zhuanyi(addr.last)}</td></tr>`

	 ).join('')

	}

	</table>`

	//一个json数组

	const data = [{

		first: '<Jame>',

		last: 'Bond'

	}, {

		first: 'Lars',

		last: '<Croft>'

	}];

	// 转义方法

	function zhuanyi(str) {

		let newstr = "";

		for (var i in str) {

			if (str[i] == "<") {

				newstr += "&lt;";

				continue;

			}

			else if(str[i] == ">") {

				newstr += "&gt;";

				continue;

			}

			newstr += str[i];

		}

		return newstr;

	};

	// 将生成的table加入到tableinsert中

	$(function () {

		$('#tableinsert').append($(temp1(data)));

	});

</script>

</head>

<body>

<div id="tableinsert"></div>

</body>

上述中我使用了``，在内部我可以随意使用${} 进行字符串的嵌入。

效果:

js es6 模板字符的更多相关文章

  1. js ES6 对字符的操作注意事项

    1.codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法. function is32Bit(c) { return c.codePointAt(0) > 0xFFF ...

  2. es6 学习2 模板字符

    es6模板字符简直是开发者的福音啊,解决了ES5在字符串功能上的痛点. 1.第一个用途,基本的字符串格式化.将表达式嵌入字符串中进行拼接.用${}来界定 //es5 var name = 'lux' ...

  3. ES6模板字面量

    前面的话 JS 的字符串相对其他语言来说功能总是有限的,事实上,ES5中一直缺乏许多特性,如多行字符串.字符串格式化.HTML转义等.ES6通过模板字面量的方式进行了填补,模板字面量试着跳出自己JS已 ...

  4. es6 模板字变量和字符串占位符

    开发者一直在寻找一种创建多行字符串的形式,但要使用单引号双引号字符串一定要在同一行才行. 老办法: 还有其他办法,虽然能实现,但是太啰嗦 es6模板自变量 使用反撇好(`)替换了单双引号 反撇好中的所 ...

  5. vue 事件监听和es6模板语法

    es6模板语法的反引号是通过左上角的飘字符弄出来了,学废了吗?

  6. js使用模板快速填充数据

    1.html <!DOCTYPE html> <html> <head> <title>模板标签</title> </head> ...

  7. JS之模板技术（aui / artTemplate）

    artTemplate是个好东西啊,一个开源的js前端模板引擎,使用简单,渲染效率特别的高. 我经常使用这个技术来在前端动态生成新闻列表,排行榜,历史记录等需要在前端列表显示的信息. 下面是artTe ...

  8. js正则表达式验证字符长度

    原理,就是把一个汉字替换为两个字母,来实现长度验证. //js正则验证字符长度 第一种:直接输出长度 alert('1sS#符'.replace(/[^\x00-\xff]/g, 'AA').leng ...

  9. 【每天半小时学框架】——React.js的模板语法与组件概念

           [重点提前说:组件化与虚拟DOM是React.js的核心理念!]        先抛出一个论题:在React.js中,JSX语法提倡将 HTML 和 CSS 全都写入到JavaScrip ...

  10. js es6 map 与 原生对象区别

    区别 object和Map存储的都是键值对组合.但是: object的键的类型是 字符串: map的键的类型是 可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...

随机推荐

  1. body标签下莫名奇妙多了一行空行，原来是编码的问题

    之前为了方便,直接在服务器修改文件,然后点保存,但是问题来了,在顶部莫名奇妙多了一个空行,如图1 图1 原来在源代码编辑的代码如图2 图2 但是在FF或者Chrome外部样式却在body里面,而不是h ...

  2. 7、mysql的缓存优化

    概述 开启Mysql的查询缓存,当执行完全相同的SQL语句的时候,服务器就会直接从缓存中读取结果,当数据被修改,之前的缓存会失效,修改比较频繁的表不适合做查询缓存. 操作流程 客户端发送一条查询给服务 ...

  3. Ubuntu 离线安装软件包

    Ubuntu 离线安装软件包 关键词:apt-offline,Ubuntu,dpkg,.deb 本文使用的ubuntu20.04,当机器无法连接外网时,我们使用离线的方式安装软件包. 离线安装的软件包 ...

  4. Zabbix技术分享——snmp异常排查指南

    大家好,我是乐乐.在IT运维中,难免会碰上设备snmp不通的情况,那么,当问题出现的时候,运维工程师该如何快速找到问题所在呢?下面让我们一起来看看吧!   1．IP配置检查 首先检查zabbix监控上 ...

  5. 案例7：将"picK"译成密码

    密码规则:用当前字母后面的第五各字符来代替当前字符.比如字符'a'后面的第5个字符为'f', 则使用'f'代替'a'.编写程序,实现该功能. 示例代码如下: #define _CRT_SECURE_N ...

  6. MP实现ID自增 &日志 &自动填充 & 逻辑删除 &乐观锁

    默认ID自增 mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl 此时的依赖 <dep ...

  7. 还在用Calendar操作Date？Java8都弃用了，还不知道它的这款强大的工具吗？

    引言 在过去的Java版本中,日期和时间的处理主要依赖于java.util.Date和java.util.Calendar类,然而随着业务系统的复杂以及技术层面的提升,这些传统的日期时间类暴露出了若干 ...

  8. Three.js实现可透视的水面效果

    1. 引言 Three.js是著名的JavaScript 3D图形库,用于浏览器中开发 3D 交互场景的 JS 引擎,可以快速的搭建三维场景 Three.js官网为:创建一个场景 – three.js ...

  9. 记录--Vue的缓存组件 | 详解KeepAlive

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 一. keep-alive 的作用 二. keep-alive 的原理 三. keep-alive 的应用 四. keep-aliv ...

  10. 二次元 & 动漫壁纸网站（内容记录）

    前言 天天和电脑.手机以及平板等电子设备打交道,一个好看的桌面壁纸图片当然是必不可少的,也曾经分享过<值得珍藏的高清壁纸网站推荐>,各种类型和分辨率的壁纸都有. 今天再分享些「高清二次元& ...