JavaScript各類型方法整理一（字元串部分）

JavaScript各類型方法整理（字元串部分）

• 前言
• • 一、傳統字元串方法
  • 二、ES6（及以後）新增的字元串方法
  • 三、總結

前言

    國中級前端工程師在工作中會因為使用錯誤的方法而引起各種bug，原因是有的方法并不是純函數，會帶來副作用，對調用方法的資料源進行修改，假如這不是你預期的後果，則會引起一些bug，而且這種bug往往查找起來比較費時費力，是以我在這裡幫助大家（也提醒自己）梳理一下各種資料類型原生方法，看看哪些方法是純函數，不帶來副作用，不改變原資料~哪些方法會對原資料源進行修改，而且傳回值可能并不是我們預期的值。

一、傳統字元串方法

方法名	作用	描述	傳回值	是否會修改原字元串
indexOf(str,start )	查找字元串	傳回字元串中指定文本首次出現的索引（位置）可接受第二個參數作為搜尋起始位置	索引或-1	否
lastIndexOf(str,start )	查找字元串	傳回字元串中指定文本最後一次出現的索引（位置）可接受第二個參數作為搜尋起始位置	索引或-1	否
search(str||reg)	查找字元串	傳回字元串中指定文本首次出現的索引（位置）不同于indexOf的點：不能接受第二個參數，可以接受正則搜尋	索引或-1	否
slice( start,end)	切割字元串	提取字元串的某個部分并在新字元串中傳回被提取的部分(不包括end項)，如果忽略第二個參數，則切割剩下的部分 ，如果某個參數為負，則從結尾向前切割	切割後的新字元串	否
substring( +start,+end)	切割字元串	類似于slice方法，差別是不能接收負的參數	切割後的新字元串	否
substr( start,length )	切割字元串	類似于slice方法，差別是在于第二個參數規定被提取部分的長度。	切割後的新字元串	否
replace( old,new )	替換字元串中某部分	用另一個值替換在字元串中指定的值，預設對大小寫敏感（可以通過/i來執行大小寫不敏感的替換），預設隻替換首個比對（用/g來執行整個字元串所有比對項）	替換後的新字元串	否
toUpperCase( )	轉換成大寫	把字元串轉換為大寫，不接收參數，執行方式為 usStr.toUpperCase（）	轉換後的新字元串	否
toLowerCase( )	轉換成小寫	把字元串轉換為小寫，不接收參數，執行方式為 usStr.toLowerCase（）	轉換後的新字元串	否
concat( str1,str2，… )	連接配接字元串	連接配接兩個或多個字元串	組合後的新字元串	否
String.trim()	去除空格	去除字元串兩端的空白符（IE8以上支援）	去空格後的新字元串	否
charAt（index）	查找字元	查找字元串中指定下标（位置）的字元串 （優于ES5提供的【】屬性通路字元串位置，不會傳回undefined）	字元串中index位置的字元 或者 空值	否
charCodeAt（index）	查找字元	查找傳回字元串中指定索引的字元 unicode 編碼	字元串中index位置的unicode編碼 或者 空值	否

二、ES6（及以後）新增的字元串方法

另外ES6提供了幾個新的字元串方法，這裡一并整理（隻整理常用方法，詳細的新增方法可以查閱阮一峰大神的ES6入門教程——字元串的新增方法）：

方法名	作用	描述	傳回值	是否會修改原字元串
includes（str,start）	判斷字元串中是否包含某個字元	判斷字元串中是否包含該字元，支援第二個參數，表示開始搜尋的位置。	布爾值	否
startsWith（str,start）	判斷字元串是否以某個字元開頭	表示參數字元串是否在原字元串的頭部，支援第二個參數，表示開始搜尋的位置。	布爾值	否
endsWith（str,start）	判斷字元串是否以某個字元結尾	表示參數字元串是否在原字元串的尾部，支援第二個參數，表示開始搜尋的位置(不同于其他兩個方法，endsWith方法的第二個參數是針對前n個字元)。	布爾值	否
repeat（times）	将字元串複制times遍	參數如果是小數，會被取整。如果參數是負數或者Infinity，會報錯。參數NaN等同于 0參數是字元串，則會先轉換成數字，	複制後的字元串	否
padStart（length,str）	補全字元串	ES2017 新增—— 用于字元串長度不足length時在字元串頭部以str補全	補全後的字元串或原字元串，如果省略第二個參數則預設以空格補全，常見用途是補全指定位數 或者提示字元串格式 ：‘09-12’.padStart(10, ‘YYYY-MM-DD’) // “YYYY-09-12”	否
padEnd（length,str）	補全字元串	ES2017 新增—— 用于字元串長度不足length時在字元串尾部以str補全	補全後的字元串或原字元串，如果省略第二個參數則預設以空格補全，常見用途是補全指定位數 或者提示字元串格式 ：‘09-12’.padStart(10, ‘YYYY-MM-DD’) // “YYYY-09-12”	否
trimStart（）	去除頭部空格	别名trimLeft（）	去除頭部空格後的字元串。除了空格鍵，對字元串頭部的 tab 鍵、換行符等不可見的空白符号也有效。	否
trimEnd（）	去除尾部空格	别名trimRight（）	去除頭部空格後的字元串 。除了空格鍵，對字元串尾部的 tab 鍵、換行符等不可見的空白符号也有效。	否

三、總結

由此我們發現，所有的字元串方法都不會操作原字元串本身，而是會傳回新字元串/索引值/布爾值等，其實是由于ECMAScript中的原始值都是不可變的，是以不單單是字元串，包括number類型的原生方法，也都不會改變其原始值。