PJCHENder 未整理筆記

[JS] JavaScript 字串(String)

2017-12-26

@(JavaScript)

[TOC]

[JS] JavaScript 字串(String)

字串相關所有方法 @ MDN

常用

字串檢驗

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let strToSearch = 'a-really-long-hyphenated-string';

// 檢驗字串是否以某字串開頭

strToSearch.startsWith('a-really'); // ES6: startsWith
/^a-really/.test(strToSearch); // test string w/ regular expression
strToSearch.indexOf('a-really') === 0; // indexOf,回傳在字串中找到目標字串的位置,若找不到則回傳-1

// 檢驗字串是否以某字串結尾

strToSearch.endsWith('hyphenated-string'); // ES6: endsWith
/hyphenated-string$/.test(strToSearch); // test string w/ regular expression
strToSearch.indexOf('hyphenated-string') === strToSearch.length - 'hyphenated-string'.length; // indexOf

// 檢驗字串是否包含

strToSearch.includes('long'); // ES6: includes
/long/.test(strToSearch); // test string w/ regular expression
strToSearch.indexOf('long') > -1; // indexOf
strToSearch.match('<regex'>) // 以陣列的方式回傳符合的結果

字串處理

1
2
3
4
5
6
7
8
9
10
11
12
13
//  字串處理
str.split('/') // 把字串拆開成陣列,將字串根據 separator ('/') 拆開,回傳成陣列
str.slice(startIndex[, endIndex]) // 把字串切開,並回傳成新的字串, endIndex 省略則從 begin 到最後
str.substr(start[, length]) // 擷取字串,從 start 開始擷取一定長度的字串
str.substring(startIndex[, endIndex]) // 擷取字串,從 indexStart 到 indexEnd
strToSearch.replace(regex|substr, newSubstr) // 不會改變原字串內容,把字串中的內容置換後回傳

// 補齊字串長度
str.padStart(Number, 'String')
str.padEnd(Number, 'String')

// 過濾空白
str.trim()

網址編譯

keywords: URL encode
1
2
3
4
5
encodeURIComponent(<string>)
decodeURIComponent(<string>)

encodeURI(<string>)
decodeURI(<string>)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 將原本從網址輸入的 URL 變成 request header 顯示的 URL

// https://www.google.com.tw/?q=hello&address=新北
let uri = 'https://www.google.com'
let parameters = {
q: 'hello',
address: '新北'
}

// https://www.google.com.tw/?q=hello&address=%E6%96%B0%E5%8C%97
let requestURL = uri + '/?' + Object.keys(parameters).map(k => `${encodeURIComponent(k)}=${encodeURIComponent(parameters[k])}`).join('&')

// 一般來說編譯的時候會把空格使用 + 表示,但 encodeURIComponent 是顯示 %20 ,因此要置換掉
requestURL = requestURL.replace('%20', '++')

Should I use encodeURI or encodeURIComponent for encoding URLs? @ StackOverflow

其他

slice, substr, substring 的差異(difference)?

str.substr(start[, length]) 的差異比較明顯,這個方法後面接的參數是長度,也就是要擷取的字數。

substring(startIndex, endIndex)slice(startIndex, endIndex) 的差異則在於:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let str = '123456789'

// substring() 中的參數如果 start > end 則兩者會直接互換
str.substring(1, 3) // '23'
str.substring(3, 1) // '23'
str.substring(7, 9) // '89'
str.substring(9, 7) // '89'

// substring() 當 index 為負值時,會直接當作 0 處理
str.substring(2, -1) // '12'
str.substring(2, 0) // '12'
str.substring(0, 2) // '12'

// slice() 中的參數如果 start > end 時不會直接互換
str.slice(1, 3) // '23'
str.slice(3, 1) // ''

// slice 中的參數如果 startIndex 是負值時,則會以字串結尾算起
str.slice(-3, 9) // '789'

// slice 中的參數如果 endIndex 是負值時,會是 string.length – Math.abs(endIndex)
str.slice(6, -1) // '78'

What is the difference between String.slice() and String.substring() @ StackOverflow

搜尋網頁內容並全部取代

keywords: replace, String.prototype.replace()
1
2
3
4
5
6
7
8
9
10
11
12
13
const fromWord = 'foo';
const toWord = 'bar';
let content = 'Hello, this is a food demo for foo bar.'

const regex = new RegExp(fromWord, 'g');

// 直接取代替換掉原本的內容
// "Hello, this is a bard demo for bar bar."
let contentReplaced = content.replace(regex, toWord);

// 如果是要根據原本的內容進行修改
// "Hello, this is a <mark>foo</mark>d demo for <mark>foo</mark> bar."
let contentModified = content.replace(regex, (match) => `<mark>${match}</mark>`);

掃描二維條碼,分享此文章