字符串模板-ES6初学习2

字符串模板

字符串模板

反引号 ``

反引号的位置在 tab 键的上方，在英文输入下就能打出来了。在出现 `` 之前如果出现下面的例子我们想在字符串内折行的话是没法做折行的。只能用 + 做拼接的方式。

let str = 'aaa bbb ccc ddd eee fff';        
console.log(str);//输出 aaa bbb ccc ddd eee fff       
let str = 'aaa bbb ccc      
 ddd eee fff';       
console.log(str);//报错了 不可以折行，折行的话只能字符串拼接如下      
let str = 'aaa bbb ccc'+      
 'ddd eee fff';               
console.log(str);//输出 aaa bbb ccc ddd eee fff          

使用字符串模板的话就是这么写

let str = `aaa bbb ccc ddd eee fff`;        
console.log(str);//输出 aaa bbb ccc ddd eee fff       
let str2 = `aaa bbb ccc      
 ddd eee fff`;       
console.log(str);//不会报错，和上面的一样显示        

模板占位符 ${}

模板占位符就是说的用 ${} 来替换一些字符串。比如

let str = 'hello';      
str = str + 'world';//以前的办法就是用+ 号做链接符号。       
console.log(str);       

现在可以用 ${} 来代替。

let str2 = 'hello';      
str2 = `${str2} world`;      
console.log(str2);          

模板占位符支持一些简单的加减乘除以及三目运算规则。比如

let str = `${1+1-4}`;      
console.log(str); 

console.log(' '); 


let obj = `${2>4?2:1}`;     
console.log(obj);        

字符串的方法

includes(), startsWith(), endsWith()

传统上，JavaScript只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

看下面的代码示例

var str = 'hello world';     
str.includes(world);      
str.startsWith(hel);    
str.endsWith(ld!);      
console.log(str.includes('world'));   
console.log(str.startsWith('hel'));     
console.log(str.endsWith('ld!'));      

由于 hello world 后面没有 ！ 所以报错了。

repeat()

repeat 方法返回一个新字符串，表示将原字符串重复n次。

var a = 'xiancai'.repeat(2);   
console.log(a);// "xiancaixiancai"      
var b = 'xiancai'.repeat(0);   
console.log(b);// ""返回空      

如果是小数的话会取整

var a = 'xo'.repeat(3.9);   
console.log(a);//"xoxoxo"     

负数只会对 -1 和 0 之间的负数不会报错，小于 -1 的负数都会报错。

padStart()，padEnd()

这两个起到补全长度的作用。 padStart() 补全开始的长度， padEnd() 补全结束的长度。
padStart 和 padEnd 一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。看下面的代码示例

var x = 'xo'
var a = x.padStart(5,'x');
console.log(a);       
var b = x.padEnd(3,'xo');
console.log(b);  

有错误，但是错误未知，不知道是不是浏览器的问题。回头了再找找问题出在什么地方。