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
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
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
在 JavaScript 中,函數是物件,因此它們有內建方法可以用來控制執行方式。 這些方法包括 .call()、.apply() 和 .bind(),主要用來改變函數執行時的 this 指向或傳遞參數,特別在物件導向或繼承中很有用。
Thumbnail
在 JavaScript 中,函數是物件,因此它們有內建方法可以用來控制執行方式。 這些方法包括 .call()、.apply() 和 .bind(),主要用來改變函數執行時的 this 指向或傳遞參數,特別在物件導向或繼承中很有用。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
在這篇文章中,我們介紹了 Dart 中的字串資料類型,包括如何使用單引號和雙引號定義字串、如何建立多行字串,以及如何使用字串插入。字串資料型態在處理文字、顯示訊息或進行字串操作時非常實用,開發者可以根據需求靈活運用這些特性。
Thumbnail
在這篇文章中,我們介紹了 Dart 中的字串資料類型,包括如何使用單引號和雙引號定義字串、如何建立多行字串,以及如何使用字串插入。字串資料型態在處理文字、顯示訊息或進行字串操作時非常實用,開發者可以根據需求靈活運用這些特性。
Thumbnail
函式(Function)是 JavaScript 中用來完成特定任務的可重複執行的程式碼片段。 函式可以接受輸入(參數),進行處理,並回傳結果。 主要的函式建立方式有函式宣告、函式表達式、和箭頭函式。
Thumbnail
函式(Function)是 JavaScript 中用來完成特定任務的可重複執行的程式碼片段。 函式可以接受輸入(參數),進行處理,並回傳結果。 主要的函式建立方式有函式宣告、函式表達式、和箭頭函式。
Thumbnail
在 JavaScript 中,字串(String)是一個不可變的原生資料型態,用來存放並處理文字。JavaScript 提供多種方法和屬性來操作和格式化字串。理解這些屬性與方法,能讓我們更靈活地處理文字資料,特別是在處理用戶輸入、顯示訊息或處理 API 回傳的資料時非常有用。
Thumbnail
在 JavaScript 中,字串(String)是一個不可變的原生資料型態,用來存放並處理文字。JavaScript 提供多種方法和屬性來操作和格式化字串。理解這些屬性與方法,能讓我們更靈活地處理文字資料,特別是在處理用戶輸入、顯示訊息或處理 API 回傳的資料時非常有用。
Thumbnail
JSON.parse:將 JSON 格式的字串轉換為 JavaScript 物件,常用於解析後端返回的資料或本地存儲中的 JSON。JSON.stringify:將 JavaScript 的物件或陣列轉換為 JSON 格式字串,方便用於資料儲存或傳輸。
Thumbnail
JSON.parse:將 JSON 格式的字串轉換為 JavaScript 物件,常用於解析後端返回的資料或本地存儲中的 JSON。JSON.stringify:將 JavaScript 的物件或陣列轉換為 JSON 格式字串,方便用於資料儲存或傳輸。
Thumbnail
JS 資料型別分為兩大類,原始型別 (Primitive values) 和物件型別 (Objects)。
Thumbnail
JS 資料型別分為兩大類,原始型別 (Primitive values) 和物件型別 (Objects)。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
在 JavaScript 中,變數是一個儲存值的容器,可用於管理和操作資料。變數可以透過 let、const 和 var 進行宣告。選擇適當的變數宣告方式是確保程式碼可讀性和可維護性的關鍵。
Thumbnail
在 JavaScript 中,變數是一個儲存值的容器,可用於管理和操作資料。變數可以透過 let、const 和 var 進行宣告。選擇適當的變數宣告方式是確保程式碼可讀性和可維護性的關鍵。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News