ES6語法學習之字串模板及字串查詢

梭梭醬加油鴨發表於2019-01-26
字串

字串模板

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

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));//這種方法可以避免
複製程式碼

相關文章