<!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引入了一种新型的字符串字面量语法,我们称之为模板字符 ...
随机推荐
-
User interface
Styles and Themes value/style <style name="CodeFont" parent="@android:style/TextAp ...
-
BufferedInputStream/BufferedOutputStream复制文件
public class Test{ public static void main(String[] args) throws IOException{ FileInputStream in = n ...
-
Android 异步加载解决方案
Android的Lazy Load主要体现在网络数据(图片)异步加载.数据库查询.复杂业务逻辑处理以及费时任务操作导致的异步处理等方面.在介绍Android开发过程中,异步处理这个常见的技术问题之前, ...
-
Win10开机小键盘不亮解决办法
1.首先修改注册表打开[HKEY_USERS\.DEFAULT\Control Panel\Keyboard]项,将"InitialKeyboardIndicators"的键值从& ...
-
关于firefox启动就崩溃的问题
前些天在公司内网机器安装了Firefox Developer,每次启动直接就崩溃.最后发现问题出在Firefox的硬件加速上.解决办法: 1.右击firefox快捷方式,选择属性,在“目标”后面,即f ...
-
UVa 1588 换抵挡装置
前言 题目 大意是说,两个槽能够插在一起,并保证每一列的高度不高于3,保证最短长度. 思路 思路很简单,取短字符串遍历长字符串的每一个位置,纪录下位置,并取最短即可. 实现 //习题3-11 换抵挡装 ...
-
adt的问题An internal error has occurred. After scene creation, #init() must be called
这个问题困扰了我好久,我也尝试去百度.google无济于事啊,让我寝食难安,太难受了,我把它贴出来,希望后人不绕弯子... 解决办法: 即可,解决这一个问题,现在酣畅淋漓,挥洒自如的capy代码了
-
《天书夜读：从汇编语言到windows内核编程》二 C语言的流程与处理
1) Debug与Release的区别:前者称调试版,后者称发行版.调试版基本不优化,而发行版会经过编译器的极致优化,往往与优化前的高级语言执行流程会大相径庭,但是实现的功能是等价的. 2) 如下fo ...
-
render函数data参数中的model选项
官方文档没有说, 但是编译v-model时, 是有model这个选项的, 例如: _c('el-input', { attrs: { "placeholder": "手机 ...
-
【Unity游戏开发】用C#和Lua实现Unity中的事件分发机制EventDispatcher
一.简介 最近马三换了一家大公司工作,公司制度规范了一些,因此平时的业余时间多了不少.但是人却懒了下来,最近这一个月都没怎么研究新技术,博客写得也是拖拖拉拉,周六周天就躺尸在家看帖子.看小说,要么就是 ...