在日常開發中，我們難免要和字串打交道，各種各樣的功能都可能用到上面的字串函式，本文參考網上文章，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('前端公眾號')

// 結果：
<a name="前端公眾號">執行上下文</a>

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"