Javascript中字符串相關(guān)常用的使用方法總結(jié)
剛剛在看Javascript犀牛書,看到字符串這一節(jié),平時工作接觸到這方面的不多,想著整理下,以備不時只需。
JavaScript的內(nèi)置功能之一就是字符串連接,如果用‘+'連接兩個數(shù)字,表示兩數(shù)相加。但是如果用于字符串,就表示第二個字符加在第一個字符之后。
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)); //第一個字符
console.log(str.charAt(str.length-1)); // 最后一個字符
//substring(starti,endi), 截取 字符串 起始startistartii, 到endi結(jié)束,且含頭不含尾,沒有
// 如果第二個參數(shù)沒有, 就默認截取到最后一個。
console.log(str.substring(1,4));
console.log(str.substring(1));
//用法同上,為負數(shù)時,就是倒數(shù)開始算,一個參數(shù)含義是倒數(shù)幾個。
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中字符串本身是固定不變的,上述方法都會返回一個新的字符串值,并不會影響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
上述的三個方法都支持第二個參數(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的行為與其他兩個方法有所不同。它針對前n個字符,而其他兩個方法針對從第n個位置直到字符串結(jié)束。
repeat方法返回一個新字符串,表示將原字符串重復(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ù)是負數(shù)或者Infinity,會報錯。
console.log('na'.repeat(Infinity))
// RangeError
console.log('na'.repeat(-1))
// RangeError
但是,如果參數(shù)是0到-1之間的小數(shù),則等同于0,這是因為會先進行取整運算。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 引入了字符串補全長度的功能。如果某個字符串不夠指定長度,會在頭部或尾部補全。padStart()用于頭部補全,padEnd()用于尾部補全
//padStart和padEnd一共接受兩個參數(shù),第一個參數(shù)用來指定字符串的最小長度,第二個參數(shù)是用來補全的字符串。
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'
//如果用來補全的字符串與原字符串,兩者的長度之和超過了指定的最小長度,則會截去超出位數(shù)的補全字符串。
consoe.log('abc'.padStart(10, '0123456789'))
// '0123456abc'
//如果省略第二個參數(shù),默認使用空格補全長度。
console.log('x'.padStart(4)) // ' x'
console.log('x'.padEnd(4)) // 'x '
//padStart的常見用途是為數(shù)值補全指定位數(shù)。下面代碼生成10位的數(shù)值字符串。
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"
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
javascript實現(xiàn)圖片左右滾動效果【可自動滾動,有左右按鈕】
這篇文章主要介紹了javascript實現(xiàn)圖片左右滾動效果,可實現(xiàn)自動滾動,帶有左右按鈕功能,基于插件scrollPic.js實現(xiàn),附帶了相應(yīng)的demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
JavaScript delete操作符應(yīng)用實例
delete 運算符 從對象中刪除一個屬性,或從數(shù)組中刪除一個元素。2009-01-01
JavaScript offset實現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動
在頁面開發(fā)時我們少不了各種鼠標(biāo)交互動作,那么JavaScript中如何實現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動,本文就詳細的介紹一下,感興趣的可以了解一下2021-05-05
JavaScript 中調(diào)用 Kotlin 方法實例詳解
這篇文章主要介紹了JavaScript 中調(diào)用 Kotlin 方法實例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
div+css布局的圖片連續(xù)滾動js實現(xiàn)代碼
整理一個div+css圖片連續(xù)滾動代碼,原理跟腳本之家之前發(fā)布的文章一樣。2010-05-05
JS實現(xiàn)網(wǎng)頁滾動條感應(yīng)鼠標(biāo)變色的方法
這篇文章主要介紹了JS實現(xiàn)網(wǎng)頁滾動條感應(yīng)鼠標(biāo)變色的方法,實例分析了javascript針對鼠標(biāo)事件的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02

