Javascript中字符串相關經常使用的使用方法總結

 

 JavaScript的內置功能之一就是字符串鏈接，若是用‘+’鏈接兩個數字，表示兩數相加。可是若是用於字符串，就表示第二個字符加在第一個字符以後。

var num=1+2;

console.log(num);

var msg='hello'+'world';

console.log(msg);

對於字符串來講，除了有length屬性，還有不少其餘有用的屬性，如： 
 

var str='hello,world';

console.log(str.length);

console.log(str.charAt(0)); //第一個字符 

console.log(str.charAt(str.length-1)); // 最後一個字符 

//substring(starti,endi), 截取 字符串  起始startistartii， 到endi結束，且含頭不含尾，沒有

// 若是第二個參數沒有， 就默認截取到最後一個。      

console.log(str.substring(1,4));

console.log(str.substring(1));

//用法同上，爲負數時，就是倒數開始算，一個參數含義是倒數幾個。

console.log(str.slice(1,4));

console.log(str.slice(-3));

//字符‘l’首次出現的位置 

console.log(str.indexOf('l'));

//字符‘l’最後一次出現的位置 

console.log(str.lastIndexOf('l'));

//在位置下標3以後，首次出現的位置 

console.log(str.indexOf('l',3));

//用‘，’分割爲字符串

console.log(str.split(','));

// 把str中的小寫h換成大寫H

console.log(str.replace('h','H'));

//講字符串轉化爲大寫

console.log(str.toUpperCase());

提示：在javascript中字符串自己是固定不變的，上述方法都會返回一個新的字符串值，並不會影響str自己的值
值得注意的是，在ES6中，給字符串增長了不少新的方法，如：
 

var s = 'Hello world!';

// 返回布爾值，表示參數字符串是否在源字符串中的頭部

console.log(s.startsWith('Hello')) // true

//endsWith()：返回布爾值，表示參數字符串是否在源字符串的尾部

console.log(s.endsWith('!')) // true

// includes()返回布爾值，表示是否找到了參數字符串

console.log(s.includes('o')) // true

上述的三個方法都支持第二個參數，表示開始搜索的位置

var s = 'Hello world!';

console.log(s.startsWith('world', 6)) // true

console.log(s.endsWith('Hello', 5))// true

console.log(s.includes('Hello', 6)) // false
 

提示：endsWith的行爲與其餘兩個方法有所不一樣。它針對前n個字符，而其餘兩個方法針對從第n個位置直到字符串結束。
repeat方法返回一個新字符串，表示將原字符串重複n次。
 

console.log('x'.repeat(3)) // "xxx"

console.log('hello'.repeat(2)) // "hellohello"

console.log('na'.repeat(0)) // ""

參數若是是小數，會被取整。

console.log('na'.repeat(2.9)) // "nana"

//若是repeat的參數是負數或者Infinity，會報錯。

console.log('na'.repeat(Infinity))

// RangeError

console.log('na'.repeat(-1))

// RangeError

可是，若是參數是0到-1之間的小數，則等同於0，這是由於會先進行取整運算。0到-1之間的小數，取整之後等於-0，repeat視同爲0。

console.log('na'.repeat(-0.9)) // ""

//參數NaN等同於0

console.log('na'.repeat(NaN)) // "

//若是repeat的參數是字符串，則會先轉換成數字

console.log('na'.repeat('na')) // ""

console.log('na'.repeat('3')) // "nanana"

ES2017 引入了字符串補全長度的功能。若是某個字符串不夠指定長度，會在頭部或尾部補全。padStart()用於頭部補全，padEnd()用於尾部補全

//padStart和padEnd一共接受兩個參數，第一個參數用來指定字符串的最小長度，第二個參數是用來補全的字符串。

console.log('x'.padStart(5, 'ab')) // 'ababx'

console.log('x'.padStart(4, 'ab')) // 'abax'

console.log('x'.padEnd(5, 'ab')) // 'xabab'

console.log('x'.padEnd(4, 'ab')) // 'xaba'

//若是原字符串的長度，等於或大於指定的最小長度，則返回原字符串。

console.log('xxx'.padStart(2, 'ab')) // 'xxx'

console.log('xxx'.padEnd(2, 'ab')) // 'xxx'

//若是用來補全的字符串與原字符串，二者的長度之和超過了指定的最小長度，則會截去超出位數的補全字符串。

consoe.log('abc'.padStart(10, '0123456789'))

// '0123456abc'

//若是省略第二個參數，默認使用空格補全長度。

console.log('x'.padStart(4)) // '   x'

console.log('x'.padEnd(4)) // 'x   '

//padStart的常見用途是爲數值補全指定位數。下面代碼生成10位的數值字符串。

console.log('1'.padStart(10, '0') )// "0000000001"

console.log('12'.padStart(10, '0')) // "0000000012"

console.log('123456'.padStart(10, '0')) // "0000123456"

//另外一個用途是提示字符串格式。

console.log('12'.padStart(10, 'YYYY-MM-DD')) // "YYYY-MM-12"

console.log('09-12'.padStart(10, 'YYYY-MM-DD'))// "YYYY-09-12"

 

能夠進羣交流~WEB前端互動交流羣434623999