JS學習筆記#3 | String 屬性與方法

更新於 發佈於 閱讀時間約 6 分鐘

JavaScript 提供多種方法和屬性來操作和格式化字串。理解這些屬性與方法,能讓我們更靈活地處理文字資料。

  • length : 返回字串的長度(字元數)。
let text = "Hello, world!";
console.log(text.length); // 輸出: 13

let text2 = "";
console.log(text2.length); // 輸出: 0


  • 索引存取 ([n]): 用於存取字串中第 n 個字元(n 從 0 開始)。
let text = "Hello, world!";
console.log(text[0]); // 輸出: "H"
console.log(text[7]); // 輸出: "w"
console.log(text[14]); // 輸出: undefined ,索引超出字串的範圍


  • charAt(index): 返回指定索引位置的字元。
let text = "Hello";
console.log(text.charAt(1)); // 輸出: "e"


  • charCodeAt(index):返回指定索引位置的字元的 Unicode 編碼(數值)
let text = "Hello";
console.log(text.charCodeAt(1)); // 輸出: 101 (Unicode 編碼 for "e")


  • toUpperCase(): 將字串轉為全大寫。
let text = "hello";
console.log(text.toUpperCase()); // 輸出: "HELLO"


  • toLowerCase(): 將字串轉為全小寫。
let text = "HELLO";
console.log(text.toLowerCase()); // 輸出: "hello"


  • slice(start, end): 擷取字串的部分,從 startend(不包括 end)。
let text = "Hello, world!";
console.log(text.slice(0, 5)); // 輸出: "Hello"


  • indexOf(substring): 返回子字串首次出現的索引,若未找到則返回 -1
let text = "Hello, world!";
console.log(text.indexOf("world")); // 輸出: 7
console.log(text.indexOf("apple")); // 輸出: -1


  • split(separator): 將字串拆分成陣列,使用指定的分隔符。
let text = "apple,banana,cherry";
console.log(text.split(",")); // 輸出: ["apple", "banana", "cherry"]


  • includes(substring): 檢查字串是否包含子字串,返回布林值 truefalse
let text = "JavaScript is fun!";
console.log(text.includes("fun")); // 輸出: true


  • trim(): 移除字串開頭和結尾的空白字元。
let text = "   Hello, world!   ";
console.log(text.trim()); // 輸出: "Hello, world!"


  • replace(searchValue, newValue): 替換字串中的特定部分(僅替換第一次匹配到的)。
let text = "Hello, world! Hello, everyone!";
let newText = text.replace("Hello", "Hi");
console.log(newText); // 輸出: "Hi, world! Hello, everyone!"


*** 注意: String 方法都不會改變原始字串

String 方法不會改變原始字串,而是返回一個新的字串。如果想要更新變數的值,需要將返回結果重新賦值

let text = "hello";
text.toUpperCase();
console.log(text); // 輸出: "hello"
let text = "hello"; 
text = text.toUpperCase(); // 必須重新賦值
console.log(text); // 輸出: "HELLO"


參考資料

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

留言
avatar-img
留言分享你的想法!
avatar-img
koko的沙龍
1會員
34內容數
koko的沙龍的其他內容
2025/04/30
React 事件處理:讓網頁動起來~ 網頁的互動性是吸引使用者、提供良好體驗的關鍵。 在 React 中,透過監聽使用者的操作(例如點擊、滑鼠移動、鍵盤輸入),並執行相應的程式碼,來實現豐富的互動效果。
Thumbnail
2025/04/30
React 事件處理:讓網頁動起來~ 網頁的互動性是吸引使用者、提供良好體驗的關鍵。 在 React 中,透過監聽使用者的操作(例如點擊、滑鼠移動、鍵盤輸入),並執行相應的程式碼,來實現豐富的互動效果。
Thumbnail
2025/04/28
在 React 的世界裡,Props 負責從父元件向子元件傳遞資料,而 State 則是負責管理元件自身的內部資料。 State 就像元件的記憶,可以儲存元件的狀態,並根據狀態的變化來更新 UI。
Thumbnail
2025/04/28
在 React 的世界裡,Props 負責從父元件向子元件傳遞資料,而 State 則是負責管理元件自身的內部資料。 State 就像元件的記憶,可以儲存元件的狀態,並根據狀態的變化來更新 UI。
Thumbnail
2025/04/27
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
2025/04/27
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
看更多
你可能也想看
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
提供一條簡單公式、一套盤點思路,幫助你快速算出去日本自助旅遊需要準備多少日幣現金!
Thumbnail
提供一條簡單公式、一套盤點思路,幫助你快速算出去日本自助旅遊需要準備多少日幣現金!
Thumbnail
在 JavaScript 中,函數是物件,因此它們有內建方法可以用來控制執行方式。 這些方法包括 .call()、.apply() 和 .bind(),主要用來改變函數執行時的 this 指向或傳遞參數,特別在物件導向或繼承中很有用。
Thumbnail
在 JavaScript 中,函數是物件,因此它們有內建方法可以用來控制執行方式。 這些方法包括 .call()、.apply() 和 .bind(),主要用來改變函數執行時的 this 指向或傳遞參數,特別在物件導向或繼承中很有用。
Thumbnail
JSON.parse:將 JSON 格式的字串轉換為 JavaScript 物件,常用於解析後端返回的資料或本地存儲中的 JSON。JSON.stringify:將 JavaScript 的物件或陣列轉換為 JSON 格式字串,方便用於資料儲存或傳輸。
Thumbnail
JSON.parse:將 JSON 格式的字串轉換為 JavaScript 物件,常用於解析後端返回的資料或本地存儲中的 JSON。JSON.stringify:將 JavaScript 的物件或陣列轉換為 JSON 格式字串,方便用於資料儲存或傳輸。
Thumbnail
函式(Function)是 JavaScript 中用來完成特定任務的可重複執行的程式碼片段。 函式可以接受輸入(參數),進行處理,並回傳結果。 主要的函式建立方式有函式宣告、函式表達式、和箭頭函式。
Thumbnail
函式(Function)是 JavaScript 中用來完成特定任務的可重複執行的程式碼片段。 函式可以接受輸入(參數),進行處理,並回傳結果。 主要的函式建立方式有函式宣告、函式表達式、和箭頭函式。
Thumbnail
在 JavaScript 中,字串(String)是一個不可變的原生資料型態,用來存放並處理文字。JavaScript 提供多種方法和屬性來操作和格式化字串。理解這些屬性與方法,能讓我們更靈活地處理文字資料,特別是在處理用戶輸入、顯示訊息或處理 API 回傳的資料時非常有用。
Thumbnail
在 JavaScript 中,字串(String)是一個不可變的原生資料型態,用來存放並處理文字。JavaScript 提供多種方法和屬性來操作和格式化字串。理解這些屬性與方法,能讓我們更靈活地處理文字資料,特別是在處理用戶輸入、顯示訊息或處理 API 回傳的資料時非常有用。
Thumbnail
在 JavaScript 中,變數是一個儲存值的容器,可用於管理和操作資料。變數可以透過 let、const 和 var 進行宣告。選擇適當的變數宣告方式是確保程式碼可讀性和可維護性的關鍵。
Thumbnail
在 JavaScript 中,變數是一個儲存值的容器,可用於管理和操作資料。變數可以透過 let、const 和 var 進行宣告。選擇適當的變數宣告方式是確保程式碼可讀性和可維護性的關鍵。
Thumbnail
在這篇文章中,我們介紹了 Dart 中的字串資料類型,包括如何使用單引號和雙引號定義字串、如何建立多行字串,以及如何使用字串插入。字串資料型態在處理文字、顯示訊息或進行字串操作時非常實用,開發者可以根據需求靈活運用這些特性。
Thumbnail
在這篇文章中,我們介紹了 Dart 中的字串資料類型,包括如何使用單引號和雙引號定義字串、如何建立多行字串,以及如何使用字串插入。字串資料型態在處理文字、顯示訊息或進行字串操作時非常實用,開發者可以根據需求靈活運用這些特性。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JS 資料型別分為兩大類,原始型別 (Primitive values) 和物件型別 (Objects)。
Thumbnail
JS 資料型別分為兩大類,原始型別 (Primitive values) 和物件型別 (Objects)。
Thumbnail
在剛開始寫 JavaScript 可能大多數的人不會特別意識到 JavaScript 的型別系統有什麼特別之處,我是在看完 Youtube 上 CS50 的課程,才理解到在不同的程式語言中,會因為語言的特性而有不同的系統,JavaScript 就是偏向比較特別的那一種。
Thumbnail
在剛開始寫 JavaScript 可能大多數的人不會特別意識到 JavaScript 的型別系統有什麼特別之處,我是在看完 Youtube 上 CS50 的課程,才理解到在不同的程式語言中,會因為語言的特性而有不同的系統,JavaScript 就是偏向比較特別的那一種。
Thumbnail
Kotlin 的字串資料類型代表文字的資料型別,使用雙引號括起來。此外,Kotlin 還支援字串模板,讓在字串中插入變數和表達式更加容易。 除此之外,Kotlin 還提供了許多內建的字串函數,像是 substring() 和 replace(),幫助更輕鬆地處理和操作字串。
Thumbnail
Kotlin 的字串資料類型代表文字的資料型別,使用雙引號括起來。此外,Kotlin 還支援字串模板,讓在字串中插入變數和表達式更加容易。 除此之外,Kotlin 還提供了許多內建的字串函數,像是 substring() 和 replace(),幫助更輕鬆地處理和操作字串。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News