ES6-字符串的扩展-模板字符串
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function(){
//模板字符串,需将原本的双引号（单引号）改成`
//模板字符串中嵌入变量，需要将变量名写在${}之中，示例：
var name="卧槽";
var sex="男";
alert("我只想说："+name); //使用普通字符串
alert(`我只想说：${name}`); //使用模板字符串
/*
原写法：
//$("table").append("<tr><td>"+name+"</td><td>"+sex+"</td><tr>");
//模板写法：
$("#table").append(`<tr><td>${name}</td><td>${sex}</td><tr>`);
*/
//省去了拼接字符串的麻烦之处，
//如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中，
//但可以使用trim方法消除它
//大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。
var num1=5;
var num2=5;
alert(`${num1}+${num2}=${num1+num2}`);
//如果是一个对象，将默认调用对象的toString方法。
var obj = {x: 1, y: 2};
alert(`${obj.x + obj.y}`);
//甚至还可以调用函数（我的天，我特么的早点知道该多好）
function a(){
return "卧槽";
}
alert(`我只想说：${a()}`);
//大括号内也可以直接写字符串
alert(`说不完的${"卧槽"}`);
//还能嵌套使用，例
const tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
`;
const data = [
{ first: '<Jane>', last: 'Bond' },
{ first: 'Lars', last: '<Croft>' },
];
console.log(tmpl(data));
//如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。
let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
alert(func('Jack')); // "Hello Jack!"
//标签模板功能
//它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串
alert`一样的卧槽`;
alert("一样的卧槽");
//标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。
//除此之外，你甚至可以使用标签模板，在JavaScript语言之中嵌入其他语言。
/*比如JQuery和Java
java`
class HelloWorldApp {
public static void main(String[] args) {
System.out.println(“Hello World!”); // Display the string.
}
}
`
HelloWorldApp.main();
请在jsp页面尝试
*/
//String.raw()方法
//String.raw方法，往往用来充当模板字符串的处理函数，
//返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。
alert("Hi\n!");
//hi
//!
alert(String.raw`Hi\u000A!`);
//Hi\u000A!
//如果原字符串的斜杠已经转义，那么String.raw不会做任何处理。
alert(String.raw({ raw: 'test' }, 0, 1, 2));
};
</script>
</head>
<body>
</body>
</html>
ES6-字符串的扩展-模板字符串的更多相关文章
- es6的新特性--模板字符串
这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...
- ES5-ES6-ES7_字符串扩展—模板字符串
includes(), startsWith(), endsWith() 传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6又提供了三种新方法 ...
- ES6 - 基础学习(4): 模板字符串和字符串新增方法
模板字符串 模板字符串:我理解为将字符串格式化.模板化,将字符串加强处理,此处的模板有动词的意思. 字符串模板基本格式: `xxxxxx`(前后都用反引号[tab键上面按键]引起来).除了作为普通字符 ...
- es6字符串的扩展——模板
todo1.模板字符串 传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法). $('#result').append( 'There are <b&g ...
- ES6扩展——模板字符串
${ } 模板字符串占位符 需要用反引号` ` 1.模板字符串 `${变量}` const xiaoming = { name:'xiaoming', age:14, say1:function(){ ...
- ES6新特性之模板字符串
ES6新特性概览 http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串 http://www.infoq.c ...
- 2、ES6结构赋值和模板字符串
ES6允许按照一定的模式,从数组和对象中提取值,这被称为结构,即解开数据的结构 1.数组的解构赋值 let [a,b] = [1,2] let [a,b,c=100] = [1,2] //c的默认值为 ...
- ES6与ES5对比 模板字符串
var title = '你好' ES5 var tpl1 = '<div>' + '<span>' + title + '</span>' '</div&g ...
- 深入浅出ES6（四）：模板字符串
作者 Jason Orendorff github主页 https://github.com/jorendorff 反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符 ...
随机推荐
- 控制结构(6) 最近最少使用(LRU)
// 上一篇:必经之地(using) // 下一篇:程序计数器(PC) 基于语言提供的基本控制结构,更好地组织和表达程序,需要良好的控制结构. There are only two hard thin ...
- Java： AutoCloseable接口
K7 增加了一些新特性,其中报错AutoCloseable 等.新特性包括如下,下面主要说说AutoCloseable . 在JDK7 中只要实现了AutoCloseable 或Closeable 接 ...
- eclipse里index.jsp头部报错的原因和解决方法
index.jsp的头<%@这句报错的话,是因为没有引入Tomcat的原因.解决:A:Window---Preferences---server---RuntimeEnviroments--Ad ...
- Spring第八篇【XML、注解实现事务控制】
前言 本博文主要讲解Spring的事务控制,如何使用Spring来对程序进行事务控制-. 一般地,我们事务控制都是在service层做的..为什么是在service层而不是在dao层呢??有没有这样的 ...
- Sql Server——数据的增删改
所谓数据的增删改就是在创建好数据库和表后向表中添加数据.删除表中的数据.更改表中的一些数据. 新增数据: 语法一: insert into 表名 values (数据内容) --这里需要 ...
- windows7下MongoDB（V3.4）的使用及仓储设计
简单的介绍一下,我使用MongoDB的场景. 我们现在的物联网环境下,有部分数据,采样频率为2000条记录/分钟,这样下来一天24*60*2000=2880000约等于300万条数据,以后必然还会增加 ...
- python文件名和文件路径操作
Readme: 在日常工作中,我们常常涉及到有关文件名和文件路径的操作,在python里的os标准模块为我们提供了文件操作的各类函数,本文将分别介绍"获得当前路径""获得 ...
- Redis缓存项目应用架构设计二
一.概述 由于架构设计一里面如果多平台公用相同Key的缓存更改配置后需要多平台上传最新的缓存配置文件来更新,比较麻烦,更新了架构设计二实现了缓存配置的集中管理,不过这样有有了过于中心化的问题,后续在看 ...
- ch1-使用路由-静态资源-404页面-ejs模板
1 package.json 项目文件夹根目录创建这个文件 //要依赖的模块 "dependencies": { //dependency 依赖的复数形式 "expres ...
- Python系列之模块、和字符串格式化
Python 模块 模块让你能够有逻辑地组织你的Python代码段. 把相关的代码分配到一个 模块里能让你的代码更好用,更易懂. 模块也是Python对象,具有随机的名字属性用来绑定或引用. 模块分为 ...