D3 - 今天点个 String Methods 套餐

前言

今天来讲讲 String Methods，你知道其实除了length 以外，String 还内建了很多好用的方法！
依照方法使用的情境分为以下几大类：

• 查找 index： charAt( )、 lastIndexOf( )、 indexOf( )
• 撷取字串： slice( )、 substring( )、 substr( )
• 去除空白： trim( )、 trimEnd( )、 trimStart( )
• 替换字元： replace( )
• 大小写转换： toUpperCase( )、 toLowerCase( )
• 查找字元： includes( )、 startsWith( )、 endsWith( )
• Unicode 转换： charCodeAt( )、 String.fromCharCode( )
• 转阵列： split( )
• 增加字元： padStart( )、 padEnd( )

1. 找找 index charAt、lastIndexOf、indexOf

字串也有 index 值，可以利用 indexOf(searchValue) 找出字串中第一个出现该字元的位置，或是 lastIndexOf(searchValue) 找最後一次出现的位置。

• 参数放入欲查找的字元，须加上' '
• 回传数字，代表该字元的 index 值

或是可以用charAt(index) 输入位置找出对应的字元

• 参数放入欲查找的 index
• 回传查询的字元

let cookies = 'Lays, Oreo, Lotus'

cookies.indexOf('o') // 9 回传第一个 'o' 的 index 值
cookies.lastIndexOf('o') // 13 回传最後一个 'o' 的 index 值
cookies.charAt(12) // 输入 12 得到该位置的字元 'L'

2. 撷取字串三兄弟 slice、substring、substr

String 有三个方法可以撷取字串中的部分字元，撷取的内容回传入一新字串，不会更动原字串内容

slice(start, end)
第一个参数start是选取的起始位置，第二个end是选到该位置前。
可输入负数，特别的是最後一个字元从-1起算

substring(start, end)
第一个参数start是选取的起始位置，第二个end是选到该位置前。
与slice用法近乎一样，差在不能输入负值

substr(start, length)
第一个参数start是选取的起始位置，第二个参数用来指定欲撷取的长度。
可输入负数

let cookies = 'Lays, Oreo, Lotus'

//slice
cookies.slice(6,10) // 'Oreo'
cookies.slice(-11,-7) // 'Oreo' 可输入负值，将从尾巴起算

//substring用法与slice差不多
cookies.substring(6,10) // 'Oreo' 

//substr 第二个参数表示选取的长度
cookies.substr(0,4) // 从 0 开始取 4 个字元 'Lays'
cookies.substr(-5,3) // 可输入负数, 从倒数 5 位取 3 个字元'Lot' 

3. 空白消掉你 trim、trimStart、trimEnd

拨虾子可以选择整尾去头去尾或是单去头单去尾，字串也可以！

trim() 去头去尾 (中间空白无法消)
trimStart() 去头
trimEnd() 去尾

• 回传新字串
• 不需放参数

let cookies = '  Lays, Oreo, Lotus  '

cookies.trim() // 消头尾空白 'Lays, Oreo, Lotus' 
cookies.trimStart() // 消开头空白 'Lays, Oreo, Lotus  '
cookies.trimEnd() // 消结尾空白 '  Lays, Oreo, Lotus'

4. 我要取代你 replace

replace 用来替换掉字串中的特定字元，第一个参数为被替换的字元，第二个参数为欲替换的字元，参数须加上' '

replace(substring, newstring)

• 不会修改原字串
• 须区分大小写
• 回传新字串

let cookies = 'Lays, Oreo, Lotus'
cookies.replace('Oreo', 'Twix') // 将原字串内的 'Oreo' 替换为 'Twix'

5. 大小写轻松换 toLowerCase、toUpperCase

简单快速的将英文字母一次修改为大写或小写，透过 toLowerCase() 全部转成小写字母 及 toUpperCase() 全部转成大写字母

• 不须放入参数
• 回传一个新字串

let cookies = 'Lays, Oreo, Lotus'
cookies.toLowerCase(); // 'lays, oreo, lotus'
cookies.toUpperCase(); // 'LAYS, OREO, LOTUS'

6. 是否包含 includes、startsWith、endsWith

若要检查字串中是否涵盖某字元，可以用 includes 从整个字串内查找
或是缩小范围，只确认是否以某字元作为开头或结尾，则用 startsWith 和 endsWtih

startsWith(searchString, position) 字串开头
endsWith(searchString, position ) 字串结尾
includes(searchString, position) 字串整体中

• 第二个参数 position 是 optional
• 皆回传 boolean 值
• 须区分大小写

let cookies = 'Lays, Oreo, Lotus'
cookies.includes('o') // true

cookies.startsWith('L') // true
cookies.startsWith('O') // false 'O'只是中间的字元, 不作为开头所以为false
cookies.endsWith('S') // false 'S'应为小写

7. Unicode转换 charCodeAt、String.fromCharCode

透过charCodeAt(index) 可以指定将字串中某一位置字元转成 Unicode 编码，括号内放入的数字代表位置，也可以不放数字，预设是 0

• 回传 Unicode 数字
• 参数放 index，若超过字串 长度 -1 的数字则回传 NaN

let cookies = 'Lays, Oreo, Lotus'

cookies.charCodeAt(0) //将字串中index 0 的'L'转为 Unicode 编码 得到 76
cookies.charCodeAt(3) //将字串中index 3 的'y'转为 Unicode 编码 得到 121

反向要将 Unicode 转回字元则是透过String.fromCharCode(Unicode number)，括号内放入的是 Unicode 数字 对照表

• 回传 Unicode 对应的字元
• 以 String 开头，参数放 Unicode 号码

String.fromCharCode(121) // y
String.fromCharCode(65) // A

8. 无痛转阵列 split

透过split(seperator)方法可以将字串型态转为阵列，在参数中指定分隔符号将字串切割再转型，转成阵列後依然用"" 包裹每个切分单位

• 回传新阵列
• 参数需用值须加上''
• 无放入参数则预设不分割

let cookies = 'Lays, Oreo, Lotus'
cookies.split(',') // 依照, 做切割单位 ['Lays', 'Oreo', 'Lotus']
cookies.split('') // 字串中每个字元都切割出来 ["L", "a", "y", "s", ",", " ", "O", "r", "e", "o", ",", " ", "L", "o", "t", "u", "s"]
cookies.split() // 没有设定分隔符号会全部不切分转阵列['Lays, Oreo, Lotus']

9. 加头加尾不加价 padStart、padEnd

透过这两个方法来增加字串中的字元，可以选择加在开头或结尾

padStart(targetLength, padString)
padEnd(targetLength, padString)

• 两个参数，第一个参数表示欲增加到的长度，第二个参数为增加的字元
• 没有放入第二个参数，预设为加入空白字元
• 回传一个新字串

let cookie = 'Oreo'
cookie.padStart(12, 'Love') // 'LoveLoveOreo'
cookie.padEnd(12,'Love')//'OreoLoveLove'

//若没有写第二个参数, 则以空白填满长度
cookie.padStart(8) // '    Oreo'
cookie.padEnd(8) // 'Oreo    '

以上就是今天的 String Methods 全餐~~
总共 19 种应该吃的饱饱饱 嗝