字符串模板及字符串新增方法

字符串模板及字符串新增方法

一提起字符串，首先我们想到的就是字符串的拼接，和后台对接接口的时候，我们经常经历这种痛苦，还好ES6新推出的字符串模板完美的解决了这个问题。让我们更方便的进行字符串拼接，下面来看示例：

//HTML部分
		<ul id="uls"></ul>
//js部分

	 <script type="text/javascript">
		 window.onload = function(){
			let data = [
				{title:"mingzi",read:"100"},
				{title:"da",read:"8"},
				{title:"misgdgngzi",read:"9"},
				{title:"sgg",read:"15"}
			]

//重点在这里：
		var uls = document.querySelector("#uls")
			for(let i =0;i<data.length;i++){
				var oli = document.createElement("li")
				//我们拼接字符串的时候，先在便签的外层添加这个符号  ``   然后通过   ${}   来填写变量名称就可以了。花括号里面填写变量名称，这就是字符串模板的应用，怎么样是不是很方便。
				oli.innerHTML=`<span>${data[i].title}</span>
					<span>${data[i].read}</span>
					<a></a>`;
				uls.appendChild(oli)
			} 
		 }

	 </script>

打印结果如下：

当然，除此之外，字符串还新增了几个比较方便的快捷方法，比如字符串的查找方法 ，看下如下例子：

let str = 'apple banner';
//正常的情况下，我们一般怎么查找：
console.log(str.indexOf("banner"));
//打印结果如下： 6 
//我们会发现他打印的是 这个单词出现的位置。如果进行判断的话。还要进行判断。es6出现了一个新的方法   includes()  方法，返回的是布尔值
console.log(str.includes('banner'))
//打印结果为：true
说明当前字符串有 banner这个值。此外。很多地方都适用这个方法，比如判断浏览器：

if(navigator.userAgent.includes('Chrome')){
console.log("是Chrome")
}else{
console.log("不是Chrome")
}

当然还有很多适用的地方，需要大家自己尝试了。还有几个比较常用的方法：

检测字符串以什么开头的方法：startsWith()

let  str = "htttps://www.baidu.com";
console.log(str.startsWith('https'))
//返回的是布尔值
打印结果为：true

检测字符串以什么结尾的方法：endsWith()
一般用于检测后缀。图片，网址等

console.log(str.endsWith('com'))
//返回的是布尔值
打印结果为：true

字符串重复方法：repeat()
括号里面填写要重复的次数，具体用作哪里，暂时还没遇到这种需求。

console.log(str.repeat(300));

填充字符串方法：
方法里面需要传两个参数。第一个参数为填充后字符串的长度，第二个参数为要填充的字符串内容。

str.padStart()  //往当前字符串开头填充东西
let  a = 'e';
let padStr = 'lov';

console.log(str.padStart(a.length+padStr.length,padStr))
打印结果：love

str.padEnd()  //往当前字符串结尾填充东西
//这个方法是一样的
console.log(str.padEnd(a.length+padStr.length,padStr)))
打印结果：elov

以上就是字符串新增的一些方法，都是比较常用的方法。灵活运用即可。