ES6(九)——String

目录TemplateStringLiterals(字符串字面量)字符串包装包含变量或表达式TagLiterals(标签字面量)具有逻辑操作字符串的扩展方法ES6-ES10学习布局TemplateStringLiterals(字符串字面量)用于解决字符串连接的问题。从ES6开始，字符串可以这样定义。`stringtext``stringtextline1stringtextline2``stringtext${expression}stringtext`在这里你可以插入任何变量或表达式，只需使用${}将其包裹起来。字符串换行ES5lethtmlhtml='

'console.log(html)//ES6html=``console.log(html)//包含变量或表达式ES5consta=20constb=10constc='javascript'conststr='myageis'+(a+b)+'ilove'+cconsole.log(str)//myageis30ilovejavascriptES6conststr=`myageis${a+b}ilove${c}`console.log(str)//myageis30ilovejavascriptTagLiterals字符串字面量解决字符串拼接问题，包含复杂逻辑的字符串不能由简单的表达式处理。所以需要另一种解决方案：TagLiterals有逻辑操作ES5constretailPrice=20constwholeSalePrice=16letshowText=''if(type==='retail'){showText='你购买的单价是：'+retailPrice}else{showText='你这次购买的批发价是：'+wholeSalePrice}console.log(showText)ES6第一个参数得到的数组，空格后面的参数是分隔符可以根据模板字符串中的变量获取可以解决很多变量输出的问题，让很多模板引擎更安全"",raw:Array(3)]}constresult=myTagFuc`hey,${name}isa${gender}`//得到的结果是模板字符串拆分后的结果，因为可能会混入这个表达式，所以它是一个数组。除了数组，还可以获取模板字符串中所有表达式的返回值。你可以得到姓名和性别constname='tom'constgender=truefunctionmyTagFuc(string,name,gender){console.log(string)//["hey,","isa","",raw:Array(3)]console.log(name)//tomconsole.log(gender)//true}constresult=myTagFuc`嘿，${name}isa${gender}`如果我们的函数有返回值，然后它将作为一个完整的模板字符串返回constname='tom'constgender=truefunctionmyTagFuc(string,name,gender){return123}constresult=myTagFuc`hey,${name}isa${gender}`console.log(result)//123如果要原样返回，在函数里面组装constname='tom'constgender=truefunctionmyTagFuc(string,name,gender){constsex=gender?'man':'woman'returnstring[0]+name+string[1]+sex+string[2]}constresult=myTagFuc`嘿，${name}是一个${gender}`console.log(result)//嘿嘿，tom是man字符串扩展方法includes()-containsstartsWith()-startendsWidth()-结尾比较正则和indexOf，这个有很多种方便。这三个都是第一个参数是字符串str，必须传递。第二个参数是可选的。起始位置的返回值为布尔值。如果找到了，那就是真的。如果没有找到，区分大小就会出错。writeconstmessage=`Error:fooisnotdefined.`console.log(message.startsWith('Error'))//trueconsole.log(message.endsWith('.'))//trueconsole.log(message.includes('foo'))//trueconsole.log(message.includes('foo',8))//假学习布局