跳至主要内容

[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>`);