ES6语法学习之字符串模板及字符串查找

字符串模板

字符串模板``可以方便的拼接字符串,变量名用${}包裹。

let name='Suosuo';
let age=16;
let str = '这个人叫' + name +'，年龄是' + age + '岁';
let str2 = `这个人叫${name}，年龄是${age}岁`;//字符串模板
console.log(str);
console.log(str2);
复制代码

利用字符串模板可以拼接html语句：

let data=[
		
		{title:'我是新闻标题我是新闻标题啊啊啊啊啊啊',read:120},
		{title:'我是新闻标题我是新闻标题啊啊啊啊啊啊',read:10},
		{title:'我是新闻标题我是新闻标题啊啊啊啊啊啊',read:30},
		{title:'我是新闻标题我是新闻标题啊啊啊啊啊啊',read:15},
		{title:'我是新闻标题我是新闻标题啊啊啊啊啊啊',read:160},
		{title:'我是新闻标题我是新闻标题啊啊啊啊啊啊',read:70},
		{title:'我是新闻标题我是新闻标题啊啊啊啊啊啊',read:190},
		]

		window.onload = function(){
			var oUl = document.querySelector('#ul1');

			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 href="javascript:;">查看详情</a>';

				oLi.innerHTML =`<span>${data[i].title}</span>
				<span>阅读人数：${data[i].read}</span>
				<a href="javascript:;">查看详情</a>`;//es6语法

				oUl.appendChild(oLi);
			}
		}
		
		<ul id="ul1">
		<!-- <li>
			<span>这是新闻的标题</span>
			<span>阅读人数：10</span>
			<a href="javascript:;">查看详情</a>
		</li> -->
	    </ul>
复制代码

字符串查找

str.indexOf('要查找的字符串') 返回的是索引位置，没找到返回-1； str.includes('要查找的字符串')返回的是布尔值。

let str = 'apple banana pear';
// console.log(str.indexOf('banana'));
if (str.indexOf('banana')!=-1) {
	alert(true);
	}else{
	alert(false);
	}

alert(str.includes('banana'));//一句话代替了上面的判断语句
复制代码

字符串是否以XXX开头/结尾

开头：str.startsWith('要查找的字符串')，返回布尔值； 结尾：str.endsWith('要查找的字符串')，返回布尔值。

let str1='file:///Users/jinkai/goodcase/es6-index/string_search.html';
let str2 = 'https://www.baidu.com';
console.log(str1.startsWith('https'));
console.log(str2.endsWith('.html'));
复制代码

重复字符串

str.repeat(次数)

		let str3='牧马人';
		console.log(str3.repeat(3));
复制代码

字符串填充

str.padStart(整个字符串的长度,填充的内容):往前填充 str.padEnd(整个字符串的长度,填充的内容)：往后填充

		let str4='a';
		let padStr = 'xxx';
		console.log(str4.padStart(str4.length+padStr.length,padStr));//这种方法可以避免
复制代码

转载于:https://juejin.im/post/5c4ab35ae51d450d06461075