ES6 字串和陣列擴充套件

一、字串的擴充套件

目前常用的字串方法有:

1）charat(index)：返回當前位的字元

2）charcodeat()：返回當前位的unicode編碼

3）slice(start=0,end=this.length)：擷取從start到end位（不包含end位[start,end) ）的字串

4）substr(from,length)：從from位開始擷取長度為length的字串

5）substring(start,end=length)：從start開始擷取，擷取到end(不含end位)

6）touppercase()、tolowercase() 大小寫轉換

7）split(val)：把字串按照val拆分成陣列

8）indexof(str,start=0)：從start位開始，匹配str是否在字串中。如果存在則返回匹配到的當前子串的首位位置，不存在則返回-1。

有時候檢驗子串是否在字串中，我們期望所得到的結果並不是索引而是true或false，但是目前的indexof方法需要我們再繼續做判斷。故而，es6又對字串的方法進行了擴充套件，首先是字串中子串的識別：

1. includes(str,start=0)：從start位開始查詢str，如果找到就返回true，否則返回false

//includes(str,start=0)  從start位開始查詢str,找到就返回true,否則返回false
letstr = 'today is a wonderful day';
console.log(str.includes('a'));//true
console.log(str.includes('a', 6));//true
console.log(str.includes('to', 5));//false

2. startswith(str,pos=0)：判斷從第pos位置開始的字串是否以str開頭

//startswidth(str,pos=0) 如果在字串的位置pos檢測到str,返回true,否則放回false
console.log(str.startswith('t'));//true
console.log(str.startswith('is', 6));//true
console.log(str.startswith('tt'));//false

3. endswith(str,pos=this.length)：判斷在pos位之前(不包含pos位)的字串是否以str結尾

//endswidth(str,pos=length) 在pos位之前的字串是否以str結尾
console.log(str.endswith('day'));//true
console.log(str.endswith('day', 5));//true

4. repeate(number)：返回重複了number次的新字串

console.log('*'.repeat(5));//*****

5. 模板字串

模板字串（template string）是增強版的字串，用反引號（`）標識。它可以當作普通字串使用，也可以用來定義多行字串，或者在字串中嵌入變數。模板字串中嵌入變數，需要將變數名寫在${}之中。

//模板字面量 
let name =
'caroline';
let msg =
`hello,$`;
console.
log(msg);//hello,caroline
//保留空格和換行
let newstr =
`$`;
//如果在模板字串中需要使用反引號，則前面要用反斜槓轉義
console.
log(`\`yo\
` world!`);//`yo` world!

${}被稱為插值語法，大括號內可以放原始值、引用值（{}會使裡面的值呼叫自身的tostring方法）。也可以放表示式，函式執行。

//放表示式
function count(a,b)x$=$`;
}console.log(count(1,2));//1x2=2
//放函式執行
function fn() 
console.log(`foo $ bar`);//foo hello world bar

模板字串的功能，不僅僅是上面這些。它可以緊跟在乙個函式名後面，該函式將被呼叫來處理這個模板字串。這被稱為標籤模板功能。標籤模板其實不是模板，而是函式呼叫的一種特殊形式。「標籤」指的就是函式，緊跟在後面的模板字串就是它的引數。

alert`123`
// 等同於
alert(123)

如果函式後是包含插值語法的字串，就不是簡單的呼叫了，而是會將模板字串先處理成多個引數，再呼叫函式。

1）按照模板${}進行拆分,把拆分後的字元放到乙個陣列裡,作為第乙個引數

2）有幾個模板${},就把這幾個模板中的值作為剩下的引數傳入

//標籤模板
function
print
(arr, ...arg) 
let a = 'a', b = 'b';
print`12$45$`;

利用標籤模板我們可以過濾 html 字串，防止注入(xss攻擊)

function
saferhtml
(arr, ...arg) 
resultstr += arr[arr.length - 1];
return resultstr;
}let name = 'while(true)';
document.write(saferhtml`hello,$
`);

二、陣列的擴充套件

目前建立陣列的方法有：

var arr = [1, 3, 2];
var arr1 = new
array(4);//長度為4的陣列
var arr2 = new
array('4');//['4']
var arr3 = new
array(1, 3, 2);//[1,3,2]

當使用new array的方式建立陣列時，如果只傳入乙個數字型引數，那麼這個引數就會被認為是陣列的長度。但是這種方式容易造成混亂。es6增加了array.of方法，傳入的引數都將作為陣列中的值。

1. array.of：傳入的引數都將作為陣列中的值

console.log(array.of(3));//[3]
console.log(array.of(1, 3, '4'));//[1, 3, "4"]

2. array.from：將類陣列轉成陣列

以前我們想要把類陣列轉成陣列，需要使用array.prototype.slice.call等方法。es6提供了更加簡潔的方式來進行轉換。

function
change
() console.log(change(1, 4, 5, 6));//[1, 4, 5, 6]

3. find(fn)和findindex(fn)：根據條件查詢

let arr = [4, 1, 5, 3, 6, 4];
console.log(arr.find(x=> x > 7));//
undefined
console.log(arr.find(x=> x > 4));//
5console.log(arr.findindex(x=> x > 4));//
2console.log(arr.findindex(x=> x > 7));//-1

1）find(fn)：根據條件查詢，如果找到滿足條件的值就立即返回該值，如果沒找到就返回undefined

2）findindex(fn)：根據條件查詢，如果找到滿足條件的值，就返回該值的索引；如果沒有找到返回-1

4.fill(value,start=0,end=length)：從start到end(不包含end位)使用給定值填充乙個陣列

let arr = [4, 1, 5, 3, 6, 4];
console.log(arr.fill('*'));//["*", "*", "*", "*", "*", "*"]
console.log(arr.fill('%',4));//["*", "*", "*", "*", "%", "%"]
console.log(arr.fill('&',2,4));//["*", "*", "&", "&", "%", "%"]
//start和end可以為負數，表示倒數第幾位，但是只有end要比start大才會填充
console.log(arr.fill('+',-2));// ["*", "*", "&", "&", "+", "+"]
console.log(arr.fill('!',-3,-2));//["*", "*", "&", "!", "+", "+"]

ES6 字串和陣列擴充套件

ES6 字串擴充套件

ES6 字串擴充套件 repeat

ES6 字串的擴充套件

ES6 字串和陣列擴充套件

ES6 字串擴充套件

ES6 字串擴充套件 repeat

ES6 字串的擴充套件

相關推薦