JavaScript的String字符串對(duì)象常用操作總結(jié)
創(chuàng)建String對(duì)象方式
聲明:String對(duì)象的方法也可以在所有基本字符串值中訪問到。
調(diào)用構(gòu)造函數(shù)String():
var str = new String(); var str = new String('hello world');//初始化str,str.length = 11;
String訪問及查找的方式
1.訪問(通過索引)
(1)charAt()或[]
1個(gè)參數(shù),參數(shù)為字符位置,返回字符
var strValue = new String('hello world'); console.log(strValue.charAt(1));//e console.log(strValue[1]);//e,IE7及以下版本使用這種方式,會(huì)返回undefined
(2)charCodeAt()
1個(gè)參數(shù),參數(shù)為字符位置,返回字符編碼
var strValue = new String('hello world'); console.log(strValue.charCodeAt(1));//101
2.查找位置
(1)indexOf()
第一個(gè)參數(shù)為指定子字符串,第二個(gè)參數(shù)為檢索位置。返回索引,如果沒有找到則返回-1
var str = 'hello world' str.indexOf('l');//2,返回找到的第一個(gè)字符的位置 str.indexOf('l',6);//9
(2)lastIndexOf()
與indexOf()的區(qū)別在于,lastIndexOf()是從字符串的末尾向前搜索子字符串
字符方法
1.擴(kuò)展字符串
concat()
接受任意數(shù)量參數(shù),用于將一個(gè)或多個(gè)字符串拼接起來,返回拼接得到新的字符串副本。
var str = new String('hello'); var result = str.concat(' world'); console.log(result);//hello world typeof result//"string"
2.獲取子字符串方法
slice(),substr(),substring(),這三個(gè)方法都會(huì)返回被操作字符串的子字符串副本,而且也都接受1或2個(gè)參數(shù),前閉后開[)
(1)slice()
var str = 'hello'; str.slice(0,2);//"he",第一個(gè)參數(shù)指定字符串開始的位置,第二個(gè)參數(shù)表示字符串到哪里結(jié)束 str.slice(-3);//"llo",o代表-1,依次倒數(shù),-3代表倒數(shù)第三個(gè)的l str.slice(-2,-1);//"l",同理,-2代表倒數(shù)第二個(gè)l,-1代表倒數(shù)第一的o
(2)substring()
var str = 'hello'; str.substring(0,2);//"he",此時(shí)的參數(shù)意義同str.slice(0,2) str.substring(-3);//"hello",substring()方法會(huì)把所有負(fù)值參數(shù)轉(zhuǎn)換為0 str.substring(-3,-2);//"",同上
(3)substr()
var str = 'hello'; str.substr(1,2);//"el",第一個(gè)參數(shù)指定字符串的開始位置,第二個(gè)參數(shù)指定的則是返回的字符個(gè)數(shù) str.substr(-3);//"llo",此時(shí)的參數(shù)意義同str.slice(-3) str.substr(-3,-1);//"",substr()方法會(huì)將負(fù)的第二個(gè)參數(shù)轉(zhuǎn)換為0
substr()方法傳遞負(fù)值時(shí)在IE中存在問題,它會(huì)返回原始的字符串,IE9修復(fù)了這個(gè)問題
3.將字符串轉(zhuǎn)換為數(shù)組
split()
基于指定的分隔符(可以是字符串,也可以是RegExp對(duì)象)將字符串分割成多個(gè)子字符串,并將結(jié)果放在一個(gè)數(shù)組中,可接受可選的第二個(gè)參數(shù),用于指定數(shù)組的大小,返回?cái)?shù)組。
var color = 'blue,red,orange'; color.split();//["red,blue,orange"],長(zhǎng)度為1 color.split(',');//["blue", "red", "orange"],長(zhǎng)度為3 var color = 'blue-red-orange'; color.split('-');//["blue", "red", "orange"],長(zhǎng)度為3 color.split(',',2);//["blue", "red"]
4.字符串大小寫轉(zhuǎn)換
toLowerCase(),toUpperCase()
var str = 'hello'; str.toUpperCase();//"HELLO" str.toLowerCase();//"hello"
5.刪除字符串空格方法
trim()
刪除字符串中前置以及后綴的所有空格,然后返回結(jié)果副本。
var str = ' hello world '; str.trim()//"hello world"
6.字符串的模式匹配方法
(1)match()
參數(shù):只接受一個(gè)參數(shù),要么是一個(gè)正則表達(dá)式,要么是一個(gè)RegExp()對(duì)象。
返回:數(shù)組。數(shù)組中的第一項(xiàng)是與整個(gè)模式匹配的字符串,之后的每一項(xiàng)(如果有)保存著正則表達(dá)式捕獲組匹配的字符串
本質(zhì)上與調(diào)用exec()相同。
var text = 'cat, bat, sat, fat'; var pattern = /.at/; var matches = text.match(pattern); matches // ["cat"] matches.input // "cat, bat, sat, fat" matches.index // 0
(2)search()
參數(shù):與match()方法相同。
返回:字符串中第一個(gè)匹配項(xiàng)的索引,如果沒有匹配項(xiàng),則返回-1。
search()方法始終從前向后找
var text = 'cat, bat, sat, fat'; var pattern = /at/; text.search(pattern) // 1
(3)replace()
參數(shù):接收兩個(gè)參數(shù),第一個(gè)參數(shù)可以是一個(gè)RegExp對(duì)象或者一個(gè)字符串(這個(gè)字符串不會(huì)轉(zhuǎn)換成正則表達(dá)式),第二個(gè)參數(shù)可以是一個(gè)字符串或者一個(gè)函數(shù)。
如果 第一個(gè)參數(shù)是字符串,那么只會(huì)替換第一個(gè)子字符串。要想替換所有子字符串,唯一的辦法就是提供一個(gè)正則表達(dá)式,而且要指定全局標(biāo)志(g)標(biāo)志。
如果 第二個(gè)參數(shù)是字符串,那么還可以使用一些特殊的字符序列,將正則表達(dá)式操作得到的值插入到結(jié)果字符串中。
也可以是函數(shù),傳遞給函數(shù)的參數(shù)依次是模式的匹配項(xiàng),模式的匹配項(xiàng)在字符串中的位置,和原始字符串。在正則表達(dá)式定義了多個(gè)捕獲組的情況下,傳遞給函數(shù)的參數(shù)依次是模式的匹配項(xiàng),第一個(gè)捕獲組的匹配項(xiàng),以此類推,但最后兩個(gè)參數(shù)分別是模式的匹配項(xiàng)在字符串中的位置和原始字符串。
字符序列 | 替換文本 |
---|---|
$$ | $ |
$& | 匹配整個(gè)pattern中的子字符串 |
$' | 匹配的子字符串之后的子字符串 |
$` | 匹配的字符串之前的子字符串 |
$n | 匹配第n個(gè)捕獲組中的子字符串,$1 |
$nn | 匹配第nn個(gè)捕獲組的子字符串,$01 |
var text = 'xxx-love-xxx'; var pattern = /xxx/g; var result = text.replace(pattern,'2') result// "2-love-2" text.replace(/(xxx)-\w{4}-(xxx)/g,'I love YOU');//"I love YOU" var text = 'xxx-love-xxx'; var pattern1 = /xxx/g; var result = text.replace(pattern1,'$$') result// "$-love-$" var result = text.replace(pattern1,'$&2') result//"xxx2-love-xxx2" var result = text.replace(pattern1,'$\'') result//"-love-xxx-love-"
相關(guān)文章
DataGear開發(fā)基于three.js的3D數(shù)據(jù)可視化看板的詳細(xì)代碼
DataGear?支持采用原生的HTML、JavaScript、CSS制作數(shù)據(jù)可視化看板,也支持導(dǎo)入由npm、vite等前端工具構(gòu)建的前端程序包,這篇文章主要介紹了DataGear制作基于three.js的3D數(shù)據(jù)可視化看板,需要的朋友可以參考下2024-02-02JS+CSS實(shí)現(xiàn)仿新浪微博搜索框的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿新浪微博搜索框的方法,實(shí)例分析了javascript針對(duì)搜索框樣式的控制技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02js實(shí)現(xiàn)用戶離開頁面前提示是否離開此頁面的方法(包括瀏覽器按鈕事件)
這篇文章主要介紹了js實(shí)現(xiàn)用戶離開頁面前提示是否離開此頁面的方法,較為詳細(xì)的分析了javascript針對(duì)瀏覽器事件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07動(dòng)態(tài)加載圖片路徑 保持JavaScript控件的相對(duì)獨(dú)立性
根據(jù)新界面的要求,需要一部分圖片來增強(qiáng)日期控件的美觀性??紤]到既要實(shí)現(xiàn)加載圖表的目標(biāo),又要保持控件的獨(dú)立性以便將來的移植。2010-09-09關(guān)于javascript document.createDocumentFragment()
documentFragment 是一個(gè)無父對(duì)象的document對(duì)象.2009-04-04用Javascript實(shí)現(xiàn)錨點(diǎn)(Anchor)間平滑跳轉(zhuǎn)
本文介紹的方法,實(shí)現(xiàn)了錨點(diǎn)(Anchor)間平滑跳轉(zhuǎn),效果非常不錯(cuò)。2009-09-09