JS操作字符串的一些常見內(nèi)置方法
一:前言
在前端項目開發(fā)中,我們經(jīng)常會涉及到處理字符串的各種操作。但是不必擔心,JavaScript是很貼心的,給了我們很多內(nèi)置的方法。這讓我們的開發(fā)成本大大降低,不必去考慮其內(nèi)部的實現(xiàn)方法(最好還是有所了解)。拿來會用即可。接下來就讓我們開始分析一些比較常用的方法吧!
注意:字符串和數(shù)組一樣,按照索引來排列。并且所有字符串常用方法, 都不會改變原始字符串, 都是以返回值的形式出現(xiàn)結(jié)果 。
二:常見的內(nèi)置方法
// 轉(zhuǎn)換為字符串 // 方法1 var num=110; var n=num.toString(); //"110" // 方法2 var num=111; var n=String(num); //"111" // 方法3 var num=112; var n="" + num; //"112"
1、charAt與charCodeAt
1) charAt
●作用:charAt() 是找到字符串中指定索引位置的內(nèi)容返回
●語法:字符串.charAt(索引)
●返回值:該索引位置對應的字符
○如果有該索引位置, 那么就是該索引位置的字符
○如果沒有該索引位置, 那么就是 空字符串('')
var str = 'hello world' //使用charAt找到字符串中的某一個內(nèi)容 var index = str.charAt(2) console.log(index)// l //查找索引為13的內(nèi)容,因為沒有返回是一共空字符串var index1 = str.charAt(13) console.log(index1);// ''
2) charCodeAt
●作用:charCodeAt() 就是返回對應索引位置的 unicode 編碼
●語法:字符串.charCodeAt(索引)
●返回值:該索引位置的對應字符的 編碼(十進制)
var str = ' hello world' 1/使用charAt找到字符串中的某一個內(nèi)容var index = str.charCodeAt(4) console.log(index)// 111 // 因為0在 unicode 對照表里面存儲的是 111,所以就會返回111
2、indexOf與lastIndexOf
1) indexOf
●作用:indexOf 就是按照字符找到對應的索引
●語法:字符串.indexOf(要查找的字符,開始索引)
●返回值:
○如果有該字符內(nèi)容, 那么就是該字符的索引位置
○如果沒有該字符內(nèi)容, 就是 -1
var str = 'hello world' //使用indexOf 找到字符串中的某一個內(nèi)容 var index = str.indexOf('l',0) console.log(index)// 2返回第一個找到的內(nèi)容的下標后面的就不查找了 var index1 = str.indexof('w',3) console.log(index1);116不管從那個索引開始,索引的位置不變 var index2 = str.indexOf('w',7) console.log(index2);// -1從索引7開始查找沒有找到返回-1
2) lastIndexOf
●作用:lastIndexOf 是從后向前檢測該字符在字符串內(nèi)的索引位置
●語法:字符串.indexOf(要查找的字符,開始索引)
●返回值:
○如果有該字符內(nèi)容, 那么就是該字符的索引位置
○如果沒有該字符內(nèi)容, 就是 -1
var str = 'hello world' //使用lastIndexOf找到字符串中的某一個內(nèi)容 var index = str.lastIndexOf('l') console.log(index)//9返回第一個找到的內(nèi)容的下標后面的就不查找了,索引的位置不變 var index = str.lastIndexOf('l',8) console.log(index)//3 返回第一個找到的內(nèi)容的下標后面的就不查找了,索引的位置不變 var index = str.lastIndexof('w',5) console.log(index)//-1 從后開始查找,開始的索引是5但是前面沒有找到w返回-1
3、substring與substr
1) substring
●作用:substring 是用來截取字符串使用的
●語法: substring(從哪個索引開始,到哪個索引截止),包含開始索引,不包含結(jié)束索引
●返回值:返回截取到的內(nèi)容
var str = 'hello world' //使用substring截取字符串中的某一個內(nèi)容 var res = str. substring(2,8) console.log(res); //llo wo
2) substr
●作用:substr 也是用來截取字符串的
●語法:substr(從哪個索引開始,截取多少個)
●返回值:截取到的內(nèi)容
var str = 'hello world' //使用substr截取字符串中的某一個內(nèi)容 var res = str.substr(2,7)//從索引2開始,截取7個 console.log(res);//llo wor
○這個方法和 substring 不一樣的是,第二個參數(shù)是截取多少個
4、toLowerCase 和 toUpperCase
●作用:這兩個方法分別是用來給字母格式的字符串轉(zhuǎn)成 小寫字母 和 大寫字母 的
●語法:
○字符串.toLowerCase()
○字符串.toUpperCase()
var str = 'hello world' //使用toUppercase轉(zhuǎn)換成大寫 var upper = str.toUppercase(console.log(upper)// HELLO WORLD //使用 toLowercase轉(zhuǎn)換成小寫 var lower = upper.toLowerCase()console.log(lower) // hello world
5、slice
●作用:截取字符串
●語法:字符串.slice(起始索引,結(jié)束索引)
○包含開始的索引對應的內(nèi)容,不包含結(jié)束索引對應的內(nèi)容
○結(jié)束索引不寫就直接截取到末尾
●返回值:截取出來的字符串
var str = ' hello world' /使用slice截取字符串 var res = str.slice(1,4) //ell console.log(res); //沒有結(jié)束的索引直接截取到末尾 var res1 = str.slice(1)//ello world console.log(res1);
6、replace
●作用:用指定的內(nèi)容替換掉字符串中的內(nèi)容
●語法:字符串.repalce(被替換的內(nèi)容,要替換的內(nèi)容)
○被替換內(nèi)容 => 換下內(nèi)容
○要替換內(nèi)容 => 換上內(nèi)容
●返回值:替換好的字符串
●注意:內(nèi)容只能被替換一次,從索引0 的位置開始
var str = 'hello world' //使用replace替換字符串中的內(nèi)容 var res -str.replace('l','M') console.log(res);// heMlo world console.log(str); // hello world
7、split
●作用:按照切割符號, 把字符串切割開, 放在一個數(shù)組里面.
●語法:字符串.split('指定的切割符')
○切割符可以不傳遞,就會和整體當做一個字符串
○('')空字符串會一位一位的切割
○(' ') 字符串中有空格 會按照原字符串中的空格切割
●返回值:一個用指定切割符切割好的數(shù)組
//使用split切割成一個數(shù)組var res = str.splitO console.log(res);//E'hello world'] var res1 = str.split('') console.log(res1);//['h', 'e', 'l','l','o',' ','w','o','r', 'l', 'd'] var res2 = str.splitC(' ') console.log(res2);//L'hello', 'world']
8、concat
●作用:字符串拼接也可以說是字符串合并
●語法:字符串.concat(字符串)
●返回值:拼接后的字符串
var str = 'hello world ' var str1 = 'ni hao' //使用concat 切割成一個數(shù)組 var res = str.concat( 'ni hao' ) console.log(res); // hello world ni hao var res1 = str.concat(str1) console.log(res1); // hello world ni hao
9、trim
●作用:取出字符串頭尾的空白內(nèi)容
●語法:字符串.trim()
●返回值:去除空白內(nèi)容以后的字符串
var str = ' hello world ' //使用trim切割成一個數(shù)組 var res = str.trim() console.log(res); // hello world
10、trimStart / trimLeft
●作用:去除字符串頭部的空白內(nèi)容
●語法:
○字符串.trimStart()
○字符串.trimLeft()
●返回值:去除空白內(nèi)容以后的字符串
var str = ' hello world ' //使用trimStart后者trimLeft去除頭部的空白內(nèi)容 var res = str.trimstart() console.log(res);//hello world var res1 = str.trimLeft() console.log(res1); //hello world
11、trimEnd / trimRight
●作用:去除字符串尾部的空白內(nèi)容
●語法:
○字符串.trimtrimEnd()
○字符串.trimRight()
●返回值:去除空白內(nèi)容以后的字符串
var str = ' hello world ' //使用trimEnd后者trimRight去除尾部的空白內(nèi)容 var res = str.trimEnd() console.log(res); // hello world var res1 = str.trimRight( console.log(res1);// hello world
12、search()
●作用:search() 方法用于檢索字符串中指定的子字符串,或檢索與正則表達式相匹配的子字符串。
●語法:
○字符串.search()
●返回值:如果沒有找到任何匹配的子串,則返回 -1。
var str="abc DEF!" // 要執(zhí)行忽略大小寫的檢索,請追加標志 i。 console.log(str.search(/DEF/))//4
三:結(jié)尾
以上就是在JavaScript處理字符串中比較常用到的一些方法,雖然有些不同方法處理結(jié)果是相同的,但是在使用性能等方面也各有優(yōu)劣。各位小伙伴可以根據(jù)自己實際的開發(fā)需求自行選擇。
到此這篇關(guān)于JS操作字符串的一些常見內(nèi)置方法的文章就介紹到這了,更多相關(guān)JS操作字符串方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript獲取GridView中用戶點擊控件的行號,列號
GridView中的某幾列有按鈕,需要獲取用戶當前點的按鈕的行號(捎帶的得到列號)2009-04-04用JavaScript和注冊表腳本實現(xiàn)右鍵收藏Web頁選中文本
用JavaScript和注冊表腳本實現(xiàn)右鍵收藏Web頁選中文本...2007-01-01javascript圖片相似度算法實現(xiàn) js實現(xiàn)直方圖和向量算法
這篇文章主要介紹了javascript實現(xiàn)圖片相似度算法,大家參考使用吧2014-01-01js刪除數(shù)組元素、清空數(shù)組的簡單方法(必看)
下面小編就為大家?guī)硪黄猨s刪除數(shù)組元素、清空數(shù)組的簡單方法(必看)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07JS重寫Date函數(shù)以及兼容IOS系統(tǒng)
這篇文章主要介紹了JS重寫Date函數(shù)以及兼容IOS系統(tǒng),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10關(guān)于JavaScript數(shù)組你所不知道的3件事
這篇文章主要為大家詳細介紹了關(guān)于JavaScript數(shù)組三個并不那么常見的功能,你所不知道的事情,感興趣的小伙伴們可以參考一下2016-08-08BootstrapTable refresh 方法使用實例簡單介紹
本文就bootstrapTable refresh 方法如何傳遞參數(shù)做簡單舉例說明,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-02-02