JavaScript 字串常用操作小結
- 高洛峰原創
- 2016-12-03 13:58:131034瀏覽
字串截取
1. substring()
xString.substring(start,end)
substring()是最常用到的字串截取方法，它可以接收兩個參數(參數不能為負值)，分別是要截取的開始位置和結束位置，它將傳回一個新的字串，其內容是從start到end-1處的所有字元。若結束參數(end)省略，則表示從start位置一直截取到最後。
let str = 'www.php.cn' console.log(str.substring(0,3)) // www console.log(str.substring(0)) //www.php.cn console.log(str.substring(-2)) //www.php.cn(传负值则视为0)
2. slice()
stringObject.slice(start, end)
slice()方法與substring()方法非常類似，它對應著兩個位置的參數也開始對應著兩個位置的參數也非常類似，它也對應到兩個位置也開始的參數和結束位置。而差異在於，slice()中的參數可以是負值，如果參數是負數，則該參數規定的是從字串的尾部開始算起的位置。也就是說，-1 指字串的最後一個字元。
let str = 'www.php.cn' console.log(str.slice(0, 3)) // www console.log(str.slice(-3, -1)) // co console.log(str.slice(1, -1)) // wwwphp.co console.log(str.slice(2, 1)) // '' (返回空字符串,start须小于end) console.log(str.slice(-3, 0)) // '' (返回空字符串,start须小于end)
3. substr()
stringObject.substr(start,length)
substr()方法可標字串中可從字串中抽取字串中從數位指定的數量。其傳回值為一個字串，包含從 stringObject的start（包括start所指的字元）開始的length個字元。如果沒有指定 length，那麼傳回的字串包含從start到stringObject的結尾的字元。另外如果start為負數，則表示從字串尾部開始算起。
let str = 'www.php.cn' console.log(webStr.substr(1, 3)) // ww. console.log(webStr.substr(0)) //www.php.cn console.log(webStr.substr(-3, 3)) // com console.log(webStr.substr(-1, 5)) // m (目标长度较大的话，以实际截取的长度为准)
4. split()
str.split([separator][, limit])
separator 指定用來分割字串的字元串（）。 separator 可以是一個字串或正規表示式。 如果忽略 separator，則傳回整個字串的陣列形式。如果 separator 是一個空字串，則 str 會將原始字串中每個字元的陣列形式傳回。
limit 一個整數，限定回傳的分割片段數量。 split 方法仍然分割每一個符合的 separator，但傳回的陣列只會截取最多 limit 個元素。
let str = 'www.php.cn' str.split('.') // ["www", "php", "cn"] str.split('.', 1) // ["www"] str.split('.').join('') // wwwphpcn
話說這個函數真心好用，很多時候的字符截取需求，就是依賴某個字符；而以上三個函數都需知道其位置。我們當然可以藉助 indexOf 等方法獲取，很顯然這很繁瑣；而藉助 split 則顯得更輕而易舉。
查找類別方法
1. indexOf() & includes()
stringObject.indexOf(searchValue,fromIndex)
indexOf()用來檢索指定的字串值在字串中首次出現的位置。它可以接收兩個參數，searchValue 表示要尋找的子字串，fromIndex 表示查找的起始位置，省略的話則從起始位置進行檢索。
let str = 'www.php.cn' console.log(str.indexOf('.')) // 3 console.log(str.indexOf('.', 1)) // 3 console.log(str.indexOf('.', 5)) // 12 console.log(str.indexOf('.', 12)) // -1
雖然indexOf()用來檢索指定的字串值在字串中首次出現的位置，然而很多時候，使用它的場景在於判斷字串中是否存在指定的判斷；因此程式碼就會如此：
if (str.indexOf('yoursPecifiedStr') !== -1) {
// do something
}
要知道在這樣的場景下，ES6 語言中的includes()就顯得更優雅許多；includes() 方法用於判斷一個字串是否被包含在另一個字串是否被包含在另一個字串中，如果是回傳true，否則回傳false。
str.includes(searchString[, position])
searchString 將要搜尋的子字串。 position 可選。從目前字串的哪個索引位置開始搜尋子字串；預設為0。需要注意的是，includes() 是區分大小寫的。
'Blue Whale'.includes('blue'); // returns false
'乔峰乔布斯乔帮主'.includes('乔布斯'); // returns true
if (str.includes('yoursPecifiedStr')) {
// do something(这样写是不是更为人性化？Yeah，这是一个更趋向人性化的时代嘛)
}
2. lastIndexOf()
stringObject.lastIndexOf(searchValue,fromIndex)
stringObject.lastIndexOf(searchValue,fromIndex)
，其檢索順序為從後向前。
let str = 'www.php.cn' console.log(str.lastIndexOf('.')) // 12 console.log(str.lastIndexOf('.', 1)) // -1 console.log(str.lastIndexOf('.', 5)) // 3 console.log(str.lastIndexOf('.', 12)) // 12 search() stringObject.search(substr) stringObject.search(regexp)
search()方法用於擷取字串中指定的子字串，或擷取與正規表示式相符的子字串。它會傳回第一個符合的子字串的起始位置，如果沒有符合的，則傳回-1。
let str = 'www.php.cn' console.log(str.search('w')) // 0 console.log(str.search(/j/g)) // 4 console.log(str.search(/\./g)) // 3
match()方法
stringObject.match(regexp)
match(c表達式的匹配。
如果參數中傳入的是子字串或沒有進行全域匹配的正規表示式，那麼match()方法會從開始位置執行一次匹配，如果沒有匹配到結果，則傳回null。否則則會傳回一個數組，該數組的第0個元素存放的是匹配文本，除此之外，返回的數組還含有兩個對象屬性index和input，分別表示匹配文本的起始字符索引和stringObject 的引用(即原字串)。
let str = '#1a2b3c4d5e#'; console.log(str.match('A')); //返回null console.log(str.match('b')); //返回["b", index: 4, input: "#1a2b3c4d5e#"] console.log(str.match(/b/)); //返回["b", index: 4, input: "#1a2b3c4d5e#"]
如果參數傳入的是具有全域匹配的正則表達式，那麼match()從開始位置進行多次匹配，直到最後。如果沒有符合結果，則傳回null。否則則會傳回數組，數組中存放所有符合要求的子字串，且沒有index和input屬性。
let str = '#1a2b3c4d5e#' console.log(str.match(/h/g)) //返回null console.log(str.match(/\d/g)) //返回["1", "2", "3", "4", "5"]
其他方法
replace()方法
🎜stringObject.replace(regexp/substr,replacement)🎜replace()方法用来进行字符串替换操作，它可以接收两个参数，前者为被替换的子字符串（可以是正则），后者为用来替换的文本。
如果第一个参数传入的是子字符串或是没有进行全局匹配的正则表达式，那么replace()方法将只进行一次替换（即替换最前面的），返回经过一次替换后的结果字符串。
let str = 'www.php.cn' console.log(str.replace('w', 'W')) // www.php.cn console.log(str.replace(/w/, 'W')) // www.php.cn
如果第一个参数传入的全局匹配的正则表达式，那么replace()将会对符合条件的子字符串进行多次替换，最后返回经过多次替换的结果字符串。
let str = 'www.php.cn' console.log(str.replace(/w/g, 'W')) // www.php.cn toLowerCase() & toUpperCase() stringObject.toLowerCase() stringObject.toUpperCase()
toLowerCase()方法可以把字符串中的大写字母转换为小写，toUpperCase()方法可以把字符串中的小写字母转换为大写。
let str = 'wwww.php.cn' console.log(str.toLowerCase()) // www.php.cn console.log(str.toUpperCase()) // WWW.PHP.CN
模板字符串
这个也是 ES6 才引入进来的新语法，来解决传统输出String模板的蹩脚问题；其功能之强大，设计之贴心，着实令人得到极大满足感，好如久旱逢甘霖一般的舒畅。更何况，在当今 MVVM 前端框架大行其道的时代，使用 ES6 语法也是不用自己个儿去操心兼容性问题，对于塑造 Dom Template 更是如虎添翼，令人爱不释手。
对于她的使用，阮一峰在ECMAScript 6 入门有过详细的描述以及示例，在此就不赘述。只需要明白我们可以像这样去操作了，试问爽否？
function ncieFunc() {
return "四海无人对夕阳";
}
var niceMan = "陈寅恪";
var jadeTalk = `一生负气成今日 \n ${ncieFunc()} ,
语出 ${niceMan} 的《忆故居》。
`
console.log(jadeTalk)
运行之，Chrome Console 输出结果如下：
一生负气成今日
四海无人对夕阳 ,
语出 陈寅恪 的《忆故居》。
组合其法
细看 JavaScript 提供的String Api，还是有蛮多的，也有些许废弃的，也有将在未来版本会出来的；这其中不乏很多也挺有用的，譬如： charAt(x)、charCodeAt(x)、concat(v1, v2,…)、fromCharCode(c1, c2,…) 等等,还有 ES6 对字符串的扩展，比如 字符串的遍历器接口，repeat() 等等，这可以参见 ES6-string，这里就不多赘述。
在实际代码生产中，很多时候需要用这些提供的基本方法，来打出一套组合拳，以解决其需求所需。很显然又可以借助 prototype 属性，将自造的各路拳法，其归置于 String 对象，然后天亮啦。这一步就看个人喜好了，这里抛出一二段，以引大玉。
字符串反转
String.prototype.reverse = function () {
return this.split('').reverse().join('')
}
去除空白行
String.prototype.removeBlankLines = function () {
return this.replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\n\t]*|[\n\r\n\t]*$/g, '')
}
String转化为数组
1, 转化为一维数组
场景是根据某子字符串转化，直接就用 split 就好；如果转换规则不统一，那么请自求多福吧。
let Str = '陈寅恪,鲁迅,钱钟书,胡适,王国维,梁启超,吴宓,季羡林' let hallAllOfFameArr = Str.split(',') console.log(hallAllOfFameArr) // ["陈寅恪", "鲁迅", "钱钟书", "胡适", "王国维", "梁启超", "吴宓", "季羡林"]
2, 转化为二维数组
String.prototype.removeBlankLines = function () {
return this.replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\n\t]*|[\n\r\n\t]*$/g, '')
}
String.prototype.strTo2dArr = function(firstSplit, secondSplit){
var contentStr = this.removeBlankLines(),
contentStrArr = contentStr.split(firstSplit),
resultArr = contentStrArr.map((element) => {
return element.split(secondSplit)
})
return resultArr
}
var str = `渺渺钟声出远方,依依林影万鸦藏。
一生负气成今日,四海无人对夕阳。
破碎山河迎胜利,残馀岁月送凄凉。
松门松菊何年梦,且认他乡作故乡。
`
console.log(str.strTo2dArr('\n', ','))
运行之，输出结果如下：
[ [ ‘渺渺钟声出远方', ‘依依林影万鸦藏。' ],
[ ‘一生负气成今日', ‘四海无人对夕阳。' ],
[ ‘破碎山河迎胜利', ‘残馀岁月送凄凉。' ],
[ ‘松门松菊何年梦', ‘且认他乡作故乡。' ] ]
以上所述是小编给大家介绍的JavaScript 字符串常用操作小结(非常实用)