JavaScript 程式札記 : 字符串操作

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

本文將介紹 JavaScript 中的字符串基本操作,包括連接、長度和切割,以及進階的搜索、替換和正則表達式操作,讓你瞭解如何有效地處理和操作字符串。

JavaScript 字符串基本操作

1.字符串連接

最基本的操作之一是字符串連接,在 JavaScript 中,我們可以使用加號(+)來連接兩個或多個字符串。

let test = "Hello, " + "world!";
console.log(test); // 輸出: Hello, world!

2.字符串長度

要獲取字符串的長度,我們可以使用.length屬性。

let test = "Hello world";
console.log(test.length); // 輸出: 11

3.字符串切割與組合

在處理字符串時,我們經常需要將它們切割成更小的部分,或者從多個小部分組合成一個大的字符串。

使用slice切割字符串

slice方法可以從一個字符串中提取一部分,並返回一個新的字符串。

let str = "Hello, world!";
let substr = str.slice(7, 12);
console.log(substr); // 輸出: world

使用splitjoin

split方法將字符串分割成子字符串數組,而join方法則是將數組的元素結合成一個字符串。

let words = "Hello world!".split(" ");
console.log(words); // 輸出: ["Hello", "world!"]

let newStr = words.join(",");
console.log(newStr); // 輸出: Hello,world!

JavaScript 字符串進階操作

1.搜索與替換

在處理字符串時,搜索特定的子字符串或者替換字符串中的某些部分是非常常見的需求。

使用indexOf進行搜索

indexOf方法可以幫助我們找到子字符串在字符串中首次出現的位置。

let test = "Hello, world!";
let index = test.indexOf("world");
console.log(index); // 輸出: 7

使用replace進行替換

replace方法可以替換字符串中的某些部分。

let test = "Hello, world!";
let newTest = test.replace("world", "everyone");
console.log(newTest); // 輸出: Hello, everyone!

2.使用正則表達式

正則表達式是一種強大的工具,用於進行複雜的文本搜索和替換操作。

let test = "The quick brown fox jumps over the lazy dog.";
let newTest = test .replace(/[aeiou]/g, "*");
console.log(newTest); // 輸出: Th* q**ck br*wn f*x j*mps *v*r th* l*zy d*g.

3.樣板字串

ES6 引入了樣板字串,這是一種允許嵌入表達式的字符串。

let name = "Alice";
let testStr = `Hello, ${name}!`;
console.log(testStr); // 輸出: Hello, Alice!

😊 感謝你的耐心閱讀,若是你喜歡這篇內容,可以透過以下方式表達你的喜歡 😊

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧|☕請喝咖啡

avatar-img
60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
HDD傳統硬碟的優點,1.容量大、價格便宜:傳統硬碟大多容量從1TB起跳,安裝於電腦用的 3.5 吋硬碟售價大約是 1500 至 2500 台幣左右(我看PCHOME的)。2.故障有前兆、資料救援機會大:傳統硬碟在故障前,都會有一些預警的訊號,例如讀取速度變慢、發出噪音、開機時開始出現
在這個網路發達的的時代,我們生活中遇到的問題大部分都可以透過Google搜尋找到答案,但是你真的會使用Google搜尋嗎 ? 有國外的研究表示有77%的使用者,他們的搜尋是缺乏效率的,那要怎樣才能正確並有效率的搜尋資料呢 ? 就讓我把自己常用的幾個小技巧分享給大家吧 !
閉包(Closure)簡單來說就是一個 Function,應該說是 Function 內的 Function,而內層的變數記憶體不會被釋放,所以即使外部函式已經執行完畢,仍然能記住並存取它自己所在的外部函式的變數。
JSON 是一種數據交換格式,源於JavaScript,可讓程式設計師將拿到的資料結構從任何語言轉換成其他語言與平台可辨識的格式,由於其簡單、易讀和跨平台的兼容性,在Web開發中廣泛使用。
HDD傳統硬碟的優點,1.容量大、價格便宜:傳統硬碟大多容量從1TB起跳,安裝於電腦用的 3.5 吋硬碟售價大約是 1500 至 2500 台幣左右(我看PCHOME的)。2.故障有前兆、資料救援機會大:傳統硬碟在故障前,都會有一些預警的訊號,例如讀取速度變慢、發出噪音、開機時開始出現
在這個網路發達的的時代,我們生活中遇到的問題大部分都可以透過Google搜尋找到答案,但是你真的會使用Google搜尋嗎 ? 有國外的研究表示有77%的使用者,他們的搜尋是缺乏效率的,那要怎樣才能正確並有效率的搜尋資料呢 ? 就讓我把自己常用的幾個小技巧分享給大家吧 !
閉包(Closure)簡單來說就是一個 Function,應該說是 Function 內的 Function,而內層的變數記憶體不會被釋放,所以即使外部函式已經執行完畢,仍然能記住並存取它自己所在的外部函式的變數。
JSON 是一種數據交換格式,源於JavaScript,可讓程式設計師將拿到的資料結構從任何語言轉換成其他語言與平台可辨識的格式,由於其簡單、易讀和跨平台的兼容性,在Web開發中廣泛使用。
你可能也想看
Google News 追蹤
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
在本章節中,我們將學習JavaScript的基本語法,包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
※ 函式基礎介紹: ※ JavaScript 特殊的函式特性: 函式可以當成值來傳遞 (可以放進變數或放進物件) 函式可以當成函式的參數 callback - 在特定事件中觸發函式 (非同步特性) ※ 函式的基本寫法: ※ 調用 (invoke) 函式: "調用" 意指呼叫或執行
※ 常用Object(物件)型態的方法: 拿到object裡面某個key的value(值): 拿到所有屬性: ※ 存取物件屬性:點記法與括號記法 使用點記法 (dot notation) 或括號記法 (bracket notation) 來存取物件的值,以下兩種寫法的結果是一樣的: //
※ 常用arry型態的方法: 長度: length 查詢第N個元素: [] 查詢元素在第N個: indexOf( ) 判斷是否為array: isArray() 新增和刪除: push():新增後面的數值 unshift():新增前面的數值 pop():刪除後面的數值 sh
Thumbnail
可選串聯(?.)運算符用於訪問 object 的屬性或調用函數。如果使用該運算符訪問的object 或調用的函式為 undefined 或 null,則表達式會回傳 undefined,而不是拋出錯誤。
Thumbnail
有個簡單的方法,把儲存格的文字串連起來!一起來看看怎麼做,很好操作唷!
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
在本章節中,我們將學習JavaScript的基本語法,包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
※ 函式基礎介紹: ※ JavaScript 特殊的函式特性: 函式可以當成值來傳遞 (可以放進變數或放進物件) 函式可以當成函式的參數 callback - 在特定事件中觸發函式 (非同步特性) ※ 函式的基本寫法: ※ 調用 (invoke) 函式: "調用" 意指呼叫或執行
※ 常用Object(物件)型態的方法: 拿到object裡面某個key的value(值): 拿到所有屬性: ※ 存取物件屬性:點記法與括號記法 使用點記法 (dot notation) 或括號記法 (bracket notation) 來存取物件的值,以下兩種寫法的結果是一樣的: //
※ 常用arry型態的方法: 長度: length 查詢第N個元素: [] 查詢元素在第N個: indexOf( ) 判斷是否為array: isArray() 新增和刪除: push():新增後面的數值 unshift():新增前面的數值 pop():刪除後面的數值 sh
Thumbnail
可選串聯(?.)運算符用於訪問 object 的屬性或調用函數。如果使用該運算符訪問的object 或調用的函式為 undefined 或 null,則表達式會回傳 undefined,而不是拋出錯誤。
Thumbnail
有個簡單的方法,把儲存格的文字串連起來!一起來看看怎麼做,很好操作唷!