前言

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. Java核心之细说泛型

    泛型是什么? 等你使用java逐渐深入以后会了解或逐步使用到Java泛型.Java 中的泛型是 JDK 5 中引入的功能之一."Java 泛型 "是一个技术术语,表示一组与定义和使 ...

  2. 完整塔建一个spring 注解版 mybaties 过程可供复制代码

    第一步引导包.新建工程maven模块 pom.xml 中导入相对应包 ++++++++++++++++++++++++++++++++++++++++++++       1      +++++++ ...

  3. CSAPP:lab7 shell

    实验网站 课程网站:CSAPP 源码下载 源码下载 实验文档下载 我的实验环境:Ubuntu 20.04 lab7文档解读 ​ 查看 tsh.c (tiny shell) 文件,您会看到它包含一个简单 ...

  4. 修改 markdown 二级标题的编号 - 自动编号 autoNumber.js nodejs

    需求 我在写 https://www.vuejsdev.com/01FE/must-know-knowledge.html 这个页面的时候, 二级页面 标题前面有编号,但是有时候我会把顺序换下,每次手 ...

  5. 什么是docker的多阶段构建

    Docker多阶段构建是一种技术,允许在不同的构建阶段中使用不同的基础镜像,并只复制构建所需的文件和依赖项.这种技术旨在减少最终生成的Docker镜像的大小和运行时的资源消耗. 多阶段构建的一般工作流 ...

  6. 【leetcode 2949 统计美丽子字符串】

    import java.util.HashMap; import java.util.Map; class Solution { public static void main(String[] ar ...

  7. python基础四（字符编码）

    一 了解字符编码的知识储备 计算机基础知识 文本编辑器存取文件的原理(nodepad++,pycharm,word) #1.打开编辑器就打开了启动了一个进程,是在内存中的,所以,用编辑器编写的内容也都 ...

  8. 记录--a标签跳转新地址无法访问，但手动输入新地址可以访问

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 问题描述 最近遇到一个有意思的问题,项目中有一个地方,点击需要跳转到一个新的域名地址 笔者使用a标签做跳转,跳是跳过去了,可是跳过去以后, ...

  9. 误删除系统超级用户（superuser）权限的恢复方式

    在使用KingbaseES数据库的时候,系统默认存在一个跟系统初始化用户同名的Superuser(默认是system用户,可更改). 这个Superuser的存在其实对于权限的管控是很有用的,但是如果 ...

  10. 关于商业智能（Business Intelligence，简称BI）的认识

    一.早期(1958年)定义 商业智能描述了一系列的概念和方法,通过应用基于事实的支持系统来辅助商业决策的制定. 二.帆软数据调研 帆软数据应用研究院对770多家企业的1400多名从业人员进行了调研(云 ...