快捷導(dǎo)航

Javascript中字符串相關(guān)常用的使用方法總結(jié)

更新時(shí)間：2017年03月13日 11:23:22 作者：nyy3723

本篇文章主要介紹了Javascript中字符串相關(guān)常用的使用方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧

剛剛在看Javascript犀牛書，看到字符串這一節(jié)，平時(shí)工作接觸到這方面的不多，想著整理下，以備不時(shí)只需。

JavaScript的內(nèi)置功能之一就是字符串連接，如果用‘+'連接兩個(gè)數(shù)字，表示兩數(shù)相加。但是如果用于字符串，就表示第二個(gè)字符加在第一個(gè)字符之后。

var num=1+2;
console.log(num);
var msg='hello'+'world';
console.log(msg);

對于字符串來說，除了有l(wèi)ength屬性，還有很多其他有用的屬性，如：

var str='hello,world';
console.log(str.length);
console.log(str.charAt(0)); //第一個(gè)字符 
console.log(str.charAt(str.length-1)); // 最后一個(gè)字符 
//substring(starti,endi), 截取 字符串 起始startistartii， 到endi結(jié)束，且含頭不含尾，沒有
// 如果第二個(gè)參數(shù)沒有， 就默認(rèn)截取到最后一個(gè)。  
console.log(str.substring(1,4));
console.log(str.substring(1));
//用法同上，為負(fù)數(shù)時(shí)，就是倒數(shù)開始算，一個(gè)參數(shù)含義是倒數(shù)幾個(gè)。
console.log(str.slice(1,4));
console.log(str.slice(-3));
//字符‘l'首次出現(xiàn)的位置 
console.log(str.indexOf('l'));
//字符‘l'最后一次出現(xiàn)的位置 
console.log(str.lastIndexOf('l'));
//在位置下標(biāo)3之后，首次出現(xiàn)的位置 
console.log(str.indexOf('l',3));
//用‘，'分割為字符串
console.log(str.split(','));
// 把str中的小寫h換成大寫H
console.log(str.replace('h','H'));
//講字符串轉(zhuǎn)化為大寫
console.log(str.toUpperCase());

提示：在javascript中字符串本身是固定不變的，上述方法都會返回一個(gè)新的字符串值，并不會影響str本身的值

值得注意的是，在ES6中，給字符串增加了很多新的方法，如：

var s = 'Hello world!';
// 返回布爾值，表示參數(shù)字符串是否在源字符串中的頭部
console.log(s.startsWith('Hello')) // true
//endsWith()：返回布爾值，表示參數(shù)字符串是否在源字符串的尾部
console.log(s.endsWith('!')) // true
// includes()返回布爾值，表示是否找到了參數(shù)字符串
console.log(s.includes('o')) // true

上述的三個(gè)方法都支持第二個(gè)參數(shù)，表示開始搜索的位置

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的行為與其他兩個(gè)方法有所不同。它針對前n個(gè)字符，而其他兩個(gè)方法針對從第n個(gè)位置直到字符串結(jié)束。
repeat方法返回一個(gè)新字符串，表示將原字符串重復(fù)n次。

console.log('x'.repeat(3)) // "xxx"
console.log('hello'.repeat(2)) // "hellohello"
console.log('na'.repeat(0)) // ""

參數(shù)如果是小數(shù)，會被取整。

console.log('na'.repeat(2.9)) // "nana"
//如果repeat的參數(shù)是負(fù)數(shù)或者Infinity，會報(bào)錯(cuò)。
console.log('na'.repeat(Infinity))
// RangeError
console.log('na'.repeat(-1))
// RangeError

但是，如果參數(shù)是0到-1之間的小數(shù)，則等同于0，這是因?yàn)闀冗M(jìn)行取整運(yùn)算。0到-1之間的小數(shù)，取整以后等于-0，repeat視同為0。

console.log('na'.repeat(-0.9)) // ""
//參數(shù)NaN等同于0
console.log('na'.repeat(NaN)) // "
//如果repeat的參數(shù)是字符串，則會先轉(zhuǎn)換成數(shù)字
console.log('na'.repeat('na')) // ""
console.log('na'.repeat('3')) // "nanana"

ES2017 引入了字符串補(bǔ)全長度的功能。如果某個(gè)字符串不夠指定長度，會在頭部或尾部補(bǔ)全。padStart()用于頭部補(bǔ)全，padEnd()用于尾部補(bǔ)全

//padStart和padEnd一共接受兩個(gè)參數(shù)，第一個(gè)參數(shù)用來指定字符串的最小長度，第二個(gè)參數(shù)是用來補(bǔ)全的字符串。
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'
//如果用來補(bǔ)全的字符串與原字符串，兩者的長度之和超過了指定的最小長度，則會截去超出位數(shù)的補(bǔ)全字符串。
consoe.log('abc'.padStart(10, '0123456789'))
// '0123456abc'
//如果省略第二個(gè)參數(shù)，默認(rèn)使用空格補(bǔ)全長度。
console.log('x'.padStart(4)) // ' x'
console.log('x'.padEnd(4)) // 'x '
//padStart的常見用途是為數(shù)值補(bǔ)全指定位數(shù)。下面代碼生成10位的數(shù)值字符串。
console.log('1'.padStart(10, '0') )// "0000000001"
console.log('12'.padStart(10, '0')) // "0000000012"
console.log('123456'.padStart(10, '0')) // "0000123456"
//另一個(gè)用途是提示字符串格式。
console.log('12'.padStart(10, 'YYYY-MM-DD')) // "YYYY-MM-12"
console.log('09-12'.padStart(10, 'YYYY-MM-DD'))// "YYYY-09-12"

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: