ES6——String 的扩展方法

模板字符串

---

es6新增的一种创建字符串的方式使用反引号（``）定义

之前JavaScript创建变量的写法：

let name = 'Nanchen';
console.log(name);    //Nanchen

输出如下：  

 使用反引号定义的写法

let name = `Nanchen`;
console.log(name);    //Nanchen

效果如下图： 

---

模板字符串中可以解析变量

 传统的做法需要用大量的""（引号）和 + 来拼接字符串才能得到想要的模板

let name = 'Nanchen'
let sayHello = "my name is " + name
console.log(sayHello);        //my name is Nanchen

 使用反引号定义的写法：

let name = `Nanchen`;
let sayHello = `my name is ${name}`
console.log(sayHello);        //my name is Nanchen

---

 模板字符串中可以换行

模板字符串：用反引号（``）标识，把变量用${}将括起来

let result = {
	name: 'Nanchen',
	age: 8,
	sex: '男'
}
	console.log(result);    //{name: "Nanchen", age: 8, sex: "男"}
let html = ` <div>
     <span>${result.name}</span>
     <span>${result.age}</span>
     <span>${result.sex}</span>
 </div> `;
document.write(html)

效果如下： 

---

 模板中也可以调用函数：

const sayHello = function () {
			return 'web学习';
		};
		let greet = `${sayHello()} 需要努力`;
		console.log(greet); 

效果如下： 

表示多行字符串，所有的空格和缩进都会被输出！！

 接上个例子：

const sayHello = function () {
			return 'web学习';
		};
		let greet = `${sayHello()}            需要努力
        换行`;
		console.log(greet); 

在${}中如果没有给变量命名的话，就会获取不到，然后报错

console.log(`你好${name}`);//Uncaught ReferenceError: string is not defined

 总结：

1. .模板字符串可以当连接符使用 也可以当普通引号使用

2. 模板字符串中可以进行空格缩进以及换行

3. 模板字符串可以调用函数

4. 不给变量命名的话会报错