點擊上方“執行上下文”，選擇“置頂公眾號”

關鍵時刻，第一時間送達！

在日常開發中，我們難免要和字符串打交道，各種各樣的功能都可能用到上面的字符串函數，本文參考網上文章，W3C資料，以及自己平常開發中的高頻需求整理形成，希望能夠幫到有需要的人。

1、通過字符串函數獲取字符串指定位置字符

1.1 charAt()

從某個字符串取得具體的字符，如果index的位置不在字符串中則返回空字符串

let?str?=?'JsCoding';
//?語法
demo.charAt(index)
//?demo
str.charAt(3)???=>??'o'

1.2 charCodeAt()

和chartAt()用法類似，只不過返回的是字符串的Unicode。同理，如果index下標不在字符串中，則返回空。

let?str?=?'JsCoding';
//?語法
demo.charCodeAt(index)
//?demo
str.charCodeAt(3)???=>??'111'

2、通過字符串函數對字符串的樣式進行改變

2.1 big

將字符串字號變大，并返回新的字符串。

let?txt =?公眾號：執行上下文
txt.big()

2.2 small

將字符串字號變小，并返回新的字符串。

let?txt =?公眾號：執行上下文
txt.small()

2.3 bold

將字符串字體加粗，并返回新的字符串。

let?txt =?公眾號：執行上下文
txt.bold()

2.4 italics

將字符串設為斜體，并返回新的字符串。

let?txt =?公眾號：執行上下文
txt.italics()

2.5 blink

將字符串設為閃動，并返回新的字符串。

let?txt =?公眾號：執行上下文
txt.blink()

2.6 fixed

將字符串以打印機文本顯示，并返回新的字符串。

let?txt =?公眾號：執行上下文
txt.fixed()

2.7 strike

將字符串加上刪除線，并返回新的字符串。

let?txt =?公眾號：執行上下文
txt.strike()

2.8 fontcolor

設置字符串指定顏色，并返回新的字符串。

let?txt =?公眾號：執行上下文
txt.fontcolor('Blue')

2.9 fontsize

設置字符串指定字號，并返回新的字符串。

let?txt =?公眾號：執行上下文
txt.fontsize(22)

2.10 toLowerCase

將字符串轉化為小寫，并返回新的字符串。

let?txt =?公眾號：執行上下文
txt.toLowerCase()

2.11 toUpperCase

將字符串轉化為大寫，并返回新的字符串。

let?txt =?公眾號：執行上下文
txt.toUpperCase()

2.12 sub

將字符串顯示為下標，并返回新的字符串。

let?txt =?公眾號：執行上下文
txt.sub()

2.13 sup

將字符串顯示為上標，并返回新的字符串。

let?txt =?公眾號：執行上下文
txt.sup()

2.14 link

將字符串顯示為鏈接，并返回新的字符串。

let?txt =?公眾號：執行上下文
txt.link()

Demo戳閱讀原文查看！！

3、判斷指定字符是否出現在字符串中，并返回其位置

3.1 indexOf()

判斷指定字符首次出現在字符串中的位置，沒有則返回-1。檢查方式從前往末尾,下標0開始。

let?str?=?'JsCoding';
//?語法?value?=>?指定字符，startindex?=>?指定位置開始
demo.indexOf(value,startindex)
//?demo
str.indexOf('s')???=>??1
str.indexOf('s',?3)???=>??-1

3.2 lastIndexOf()

判斷指定字符最后一次出現在字符串中的位置，沒有則返回-1，檢查方式為從末尾往前。如果指定的value值在指定位置之前，則返回的是最后一個出現value的位置。

let?str?=?'JsCoding';
//?語法?value?=>?指定字符，startindex?=>?指定位置開始
demo.lastIndexOf(value,startindex)
//?demo
str.lastIndexOf('s')???=>??1
str.lastIndexOf('s',?3)???=>??1

注意：indexOf() 和 lastIndexOf() 都區分大小寫。

4、對字符串進行操作

4.1 replace()

用于字符串中以指定字符替換指定字符。

let?str?=?'JsCoding';
//?語法?regexp/substr?=>?需要替換的文本或正則對象，replaceText?=>?替換的文本
demo.replace(regexp/substr,replaceText)
//?demo
str.replace(/JsCoding/,?'JsCoding：是執行上下文的微信號')???
//?結果?=>?
"JsCoding：是執行上下文的微信號"

4.2 slice()

獲取字符串中的某個部分，并返回獲取的部分。

let?str?=?'JsCoding';
//?語法?start?=>?起始位置，end?=>?結束位置
demot.slice(start,end)
//?demo
str.slice(1,3)???
//?結果?=>?
"sC"

4.3 substr()

獲取字符串從指定位置開始，指定長度的字符。

let?str?=?'JsCoding';
//?語法?start?=>?起始位置，length?=>?長度
demo.substr(start,length)
//?demo
str.substr(1,3)???
//?結果?=>?
"sCo"

4.4 substring()

獲取字符串指定區間的字符。

let?str?=?'JsCoding';
//?語法 start =>?起始位置必須為存在的下標，end =>?結束位置可以為負數，則往前尋找。
demo.substring(start,end)
//?demo
str.substring(1,3)???
//?結果?=>?
"sC"

str.substring(3,-3)???
//?結果?=>?
"JsC"

如果start === end 則返回空。

4.5 split()

將字符串分割成字符串數組。

let?str?=?'JsCoding';
//?語法 separator =>?字符串or表達式，howmany =>?分割字符串的長度。
demo.split(separator,howmany)
//?demo
str.split(''?,3)???
//?結果?=>?
["J",?"s",?"C"]

str.split('')???
//?結果?=>?
["J",?"s",?"C",?"o",?"d",?"i",?"n",?"g"]

4.6 match()

返回所有查找的關鍵字內容的數組。

let?str?=?'JsCoding';
let?reg?=?/di/ig;

//?語法 searchvalue =>?檢索的字符串值，regexp =>?匹配的RegExp對象。
demo.match(searchvalue?or??RegExp)
//?demo
str.match(reg)
//?結果?=>?
["di"]

str.match('di')???
//?結果?=>?
["di"]

注意：String 對象的方法 slice()、substring() 和 substr() (不建議使用)都可返回字符串的指定部分。slice() 比 substring() 要靈活一些，因為它允許使用負數作為參數。slice() 與 substr() 有所不同，因為它用兩個字符的位置來指定子串，而 substr() 則用字符位置和長度來指定子串。

5、其他

anchor()

用來創建HTML錨

let?text?=?'執行上下文'
text.anchor('前端公眾號')

//?結果：
"前端公眾號">執行上下文

6、日常小用途

6.1 將 'Coding, Js' => 'Js Coding'

var?str?=?"Coding,?Js";
str.replace(/(\w+)\s*,?\s*(\w+)/,?"$2?$1");

//?結果

"Js?Coding"

6.2 將雙引號變成單引號

var?str?=?'"Js",?"Coding"'
str.replace(/"([^"]*)"/g,?"'$1'");
//?結果
"'Js',?'Coding'"

6.3 將字符串第一個字母改為大寫

var?str?=?'jjj?sss?ccc';
zhuan?=?str.replace(/\b\w+\b/g,?function(c){
??return?c.substring(0,1).toUpperCase()?+?c.substring(1);}
)

//?結果

"Jjj?Sss?Ccc"

6.4 將字符串中指定字符替換成指定字符

var?str?=?'ccadjlkj3kajgl2lkjalg'
str.replace(/d/,?'公眾號：執行上下文')

//?結果

"cca公眾號：執行上下文jlkj3kajgl2lkjalg"你也可以添加下面微信加入前端微信群，我們一起交流前端技術，一起進步。

前端公眾號和交流群

總結

以上是生活随笔為你收集整理的获取某个输入框的字符长度_收藏，最全的字符串函数方法，总有你用到的~的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。