Skip to main content

[JS] JavaScript 字串(String)

字串相關所有方法 @ MDN

常用#

字串檢驗#

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'>) // 以陣列的方式回傳符合的結果

字串處理#

// 字串處理
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#
encodeURIComponent(<string>)
decodeURIComponent(<string>)
encodeURI(<string>)
decodeURI(<string>)
// 將原本從網址輸入的 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) 的差異則在於:

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()#
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>`);
Last updated on