JavaScript String (字串)筆記

Photo by Dominik Kiss on Unsplash

在 JavaScript 中，String (字串) 使用單引號 ' '或 雙引號 " " 包住，使用單引號與雙引號並無不同，但兩者不可混用。要特別注意雙引號裡面不能有雙引號，單引號裡面不能有單引號，如下 ：

let str = '這是'字'串';      //SyntaxError: Unexpected identifier
let str2 = "這是"字"串2";    //SyntaxError: Unexpected identifier

在 JavaScript 中程式是由左至右、由上而下的順序，依次解析。所以相同的引號包裹，在程式的眼裡是這樣的….

et str = '這是'  字  '串'  // String, undefined, String

程式在看到第二個引號出現時，就會判斷這是字串的 End。後面的「字」就會被認為是一個變數，然後看到下一個引號，又判斷為新字串的 Start。最後程式就會不理解這到底是啥，就直接噴錯。

可以改成這樣或使用跳脫字元 \ 如下

let str = '這是"字"串';    // '這是"字"串'
let str2 = "這是'字'串2";  // "這是'字'串2"
let str3 = '這是\'字\'串3';    //'這是'字'串3'
let str4 = "這是\"字\"串4";    //"這是"字"串4"

也可以使用 + 號來連接字串 ：

let str = '這是字串1' + '這是字串2';  //'這是字串1這是字串2'

特殊字元表如下：

String 物件內建的屬性 (Properties)

String.length

• 表示字串的長度。

let str = “Lorem ipsum dolor”
str.length  //17

String 物件內建的方法 (Methods)

Str.charAt(index)

• 取得特定位置字元，預設值 0 開始。
• 參數 index :指定字串位置的數值，長度範圍從0到 String.Length -1。

let str = "Lorem ipsum dolor"
str.charAt(1) // o

Str.charCodeAt(index)

• 取得特定位置字元的 Unicode 編碼，如輸入值超出範圍則 NAN。
• 參數 index :指定字串位置的數值，長度範圍從0到 String.Length -1。

let str = "Lorem ipsum dolor"
str.charCodeAt(1) // 111

Str.concat(string2, string3[, …, stringN])

• 將一個或多個字串和並於原字串中，並回傳新字串。
• 參數 string:與原字串連接的新字串組。

let str = "Lorem ipsum dolor"
str.concat('sit amet','consectetur adipisicing elit.')
// "Lorem ipsum dolor sit amet , consectetur adipisicing elit."

Str.includes(searchString[, position])

• 取得字串內是否相符內容，並回傳 true 或 false。
• 注意：有區分大小寫
• 參數 searchString:尋找的字串。
• 參數 position:指定開始尋找的位置。

let str = "Lorem ipsum dolor"
str.includes('dolor') //true

Str.indexOf(searchValue[, fromIndex])

• 判斷字串中是否包含此字串，位置從 0開始，找不到則回傳 -1。
• fromIndex:從哪個位置開始找起，預設為 0
• 注意：有區分大小寫

let str = "Lorem ipsum dolor"
str.indexOf('x') // -1

Str.lastIndexOf(searchValue[, fromIndex])

• 判斷字串中是否包含此字串，但開始起點從右至左，找不到則回傳 -1。
• fromIndex:從哪個位置開始找起，預設為 0
• 注意：有區分大小寫

let str = "Lorem ipsum dolor"
str.indexOf('r') // 16

Str.match(regexp)

• 搭配正則表達式(regexp)並找出字串中相符內容，並回傳陣列。
• 未找到回傳null

let str = "Lorem ipsum dolor"
let regexp=/lorem/i
str.match(regexp) // ["Lorem"]

補充：正則表達式(regexp)有三種寫法：

/ab+c/i;  
new RegExp('ab+c', 'i')
new RegExp(/ab+c/, 'i')

Str.padEnd(targetLength [, padString])

• 將原字串加入指定重複新字串並回傳
• targetLength:指定字串長度，如數值小於原字串長度，則回傳原字串
• padString:新字串

'Lorem'.padEnd(10,'abc') // 'Loremabcab'

Str.padStart(targetLength [, padString])

• 將原字串加入指定重複新字串，但從左由右加入字串並回傳
• targetLength:指定字串長度，如數值小於原字串長度，則回傳原字串
• padString:新字串

'Lorem'.padStart(10,'abc')) // 'abcabLorem'

Str.repeat(count)

• 重複原字串並回傳新字串
• count:重複的整數

"Lorem".repeat(2) //"LoremLorem"
"Lorem".repeat(3) //"LoremLoremLorem"

Str.replace(regexp|substr, newSubStr|function)

• 將原字串取代另一個字串，回傳新字串
• regexp:可帶入正則表達式
• substr:將衼替代字串
• newSubStr：新字串
• function:新字串函式

let str='Lorem ipsum dolor'
str.replace('dolor', 'aaa')  // "Lorem ipsum aaa"
str.replace(/Dolor/gi, 'bbb') // "Lorem ipsum bbb" 正則表達式

還可以使用$1、$2… 來表式匹配群組

let str='Lorem ipsum'
str.replace(/(\w+)\s(\w+)/, '$2,$1') // "ipsum,Lorem"

Str.search(regexp)

• 找原字串中，正則表達式指定值，與 Str.indexOf(searchValue [, fromIndex])略同
• regexp:正則表達式
• 回傳原字串指定位置 index
• 未找到則回傳 -1

let str='lorem Ipsum dolor'
str.search(/[A-Z]/g) // 6
str.search(/[.]/g) // -1

Str.slice(beginIndex[, endIndex])

• 取得原字串特定位置值，並回傳新字串
• beginIndex:數字表示要從哪個位置開始擷取，負值時特定位置從最後開始，預設為 0
• endIndex:數字表示要從哪個位置前結束擷取，並不包含最後字串，負值時特定位置從最後開始，預設為 0

let str='lorem Ipsum dolor'
str.slice(1,5) // "orem"
str.slice(-3) // "lor"

Str.split([separator/regexp[, limit]])

• 根據你指定的分隔符號，將字串切割成陣列
• 回傳新陣列
• separator:用來指定分隔符號
• regexp:正則表達式
• limit:數值，表示回傳幾個分隔字串

let str='lorem Ipsum dolor'
str.split(' ',2) // ["lorem", "Ipsum"]
let str1='lorem 1 Ipsum 2 dolor'
str1.split(/(\d)/) // ["lorem ", "1", " Ipsum ", "2", " dolor"]

Str.substring(indexStart[, indexEnd])

• 取得原字串特定位置值，並回傳新字串
• indexStart:數字表示要從哪個位置開始擷取，負值無效
• indexEnd:數字表示要從哪個位置前結束擷取
• 如果 indexStart 等於 indexEnd，回傳一個空字串
• 如果省略 indexEnd，回傳整個字串
• 如果任一參數小於0或為 NaN，則被當作 0
• 如果任一參數大於 原字串長度，則被當作 原字串長度
• 如果indexStart 大於 indexEnd，則執行兩個參數對換

let str='lorem Ipsum dolor'
str.substring()     // "lorem Ipsum dolor"
str.substring(0,0)  // ""
str.substring(3,-3) // "lor"
str.substring(7,4)  // "m I"
str.substring(0,99) // "lorem Ipsum dolor"

Str.toLowerCase()

• 將字串英文字母轉成小寫

let str="LOREM IPSUM DOLOR"
str.toLowerCase()     // "lorem ipsum dolor"

Str.toUpperCase()

• 將字串英文字母轉成大寫

let str="lorem ipsum dolor"
str.toUpperCase()   // "LOREM IPSUM DOLOR"

Str.toString()

• 將指定值以字串回傳

let str = new String("lorem ipsum dolor");
str.toString()    // "lorem ipsum dolor"

Str.trim()

• 將字串中空白符號移除

let str = "   lorem ipsum dolor  "
str.trim()    // "lorem ipsum dolor"

…

參考: String 、字符串

以上是我對字串的 屬性與方法 學習筆記😉。

***如果有任何想法，也歡迎留言與我分享~***