JavaScript >> Javascript 文檔 >  >> Tags >> split

如何在 JavaScript 中索引、拆分和操作字符串

這篇文章最初是為 DigitalOcean 寫的。

簡介

一個字符串 是一個或多個字符的序列,可能由字母、數字或符號組成。 JavaScript 字符串中的每個字符都可以通過索引號訪問,並且所有字符串都有可用的方法和屬性。

在本教程中,我們將了解字符串原語和 String 之間的區別 對象,如何索引字符串,如何訪問字符串中的字符,以及字符串上常用的屬性和方法。

字符串基元和字符串對象

首先,我們將闡明這兩種類型的字符串。 JavaScript 區分 字符串原語 ,一個不可變的數據類型,和 String 對象。

為了測試兩者的區別,我們將初始化一個字符串原語和一個字符串對象。

// Initializing a new string primitive
const stringPrimitive = 'A new string.'

// Initializing a new String object
const stringObject = new String('A new string.')

我們可以使用 typeof 運算符來確定值的類型。在第一個示例中,我們只是將一個字符串分配給了一個變量。

typeof stringPrimitive
string

在第二個例子中,我們使用了 new String() 創建一個字符串對象並將其分配給一個變量。

typeof stringObject
object

大多數時候,您將創建字符串原語。 JavaScript 能夠訪問和利用 String 的內置屬性和方法 對象包裝器,而無需實際將您創建的字符串原語更改為對象。

雖然這個概念一開始有點挑戰性,但您應該知道原始和對象之間的區別。本質上,所有字符串都有可用的方法和屬性,並且每次調用方法或屬性時,JavaScript 都會在後台執行到對象的轉換並返回到原始類型。

字符串的索引方式

字符串中的每個字符對應一個索引號,以 0 開頭 .

為了演示,我們將創建一個值為 How are you? 的字符串 .

H o w 一個 r e o ?
0 1 2 3 4 5 6 7 8 9 10 11

字符串中的第一個字符是 H ,對應索引0 .最後一個字符是 ? ,對應於 11 .空白字符也有一個索引,在 37 .

能夠訪問字符串中的每個字符為我們提供了多種處理和操作字符串的方法。

訪問字符

我們將演示如何使用 How are you? 訪問字符和索引 字符串。

'How are you?'

使用方括號表示法,我們可以訪問字符串中的任何字符。

'How are you?'[5]
r

我們也可以使用 charAt() 方法以索引號作為參數返回字符。

'How are you?'.charAt(5)
r

或者,我們可以使用 indexOf() 按字符的第一個實例返回索引號。

'How are you?'.indexOf('o')
1

雖然“o”在How are you?中出現了兩次 字符串,indexOf() 將獲得第一個實例。

lastIndexOf() 用於查找最後一個實例。

'How are you?'.lastIndexOf('o')
9

對於這兩種方法,您還可以在字符串中搜索多個字符。它將返回實例中第一個字符的索引號。

'How are you?'.indexOf('are')
4

slice() 另一方面,方法返回兩個索引號之間的字符。第一個參數是起始索引號,第二個參數是應該結束的索引號。

'How are you?'.slice(8, 11)
you

注意 11? , 但 ? 不是返回輸出的一部分。 slice() 將返回介於最後一個參數之間的內容,但不包括最後一個參數。

如果不包含第二個參數,slice() 將返回從參數到字符串末尾的所有內容。

'How are you?'.slice(8)
you?

總而言之,charAt()slice() 將有助於根據索引號返回字符串值,以及 indexOf()lastIndexOf() 將做相反的事情,根據提供的字符串字符返回索引號。

查找字符串的長度

使用 length 屬性,我們可以返回字符串中的字符數。

'How are you?'.length
12

請記住 length 屬性返回從 1 開始的實際字符數,即 12,而不是從 0 開始的最終索引號 並在 11 結束 .

轉換為大寫或小寫

兩個內置方法 toUpperCase()toLowerCase() 是在 JavaScript 中格式化文本和進行文本比較的有用方法。

toUpperCase() 會將所有字符轉換為大寫字符。

'How are you?'.toUpperCase()
HOW ARE YOU?

toLowerCase() 會將所有字符轉換為小寫字符。

'How are you?'.toLowerCase()
how are you?

這兩種格式化方法不需要額外的參數。

值得注意的是,這些方法並沒有改變原來的字符串。

分割字符串

JavaScript 有一種非常有用的方法,可以按字符分割字符串並從各個部分創建一個新數組。我們將使用 split() 用空格字符分隔數組的方法,由 " " 表示 .

const originalString = 'How are you?'

// Split string by whitespace character
const splitString = originalString.split(' ')

console.log(splitString)
[ 'How', 'are', 'you?' ]

現在我們在 splitString 中有一個新數組 變量,我們可以通過索引號訪問每個部分。

splitString[1]
are

如果給定一個空參數,split() 將使用字符串中的每個字符創建一個逗號分隔的數組。

通過拆分字符串可以確定一個句子中有多少個單詞,並使用該方法來確定人的名字和姓氏,例如。

修剪空白

JavaScript trim() 方法從字符串的兩端刪除空格​​,但不會刪除中間的任何地方。空白可以是製表符或空格。

const tooMuchWhitespace = '     How are you?     '

const trimmed = tooMuchWhitespace.trim()

console.log(trimmed)
How are you?

trim() 方法是執行刪除多餘空格的常見任務的簡單方法。

查找和替換字符串值

我們可以在字符串中搜索一個值,並使用 replace() 將其替換為新值 方法。第一個參數是要查找的值,第二個參數是要替換的值。

const originalString = 'How are you?'

// Replace the first instance of "How" with "Where"
const newString = originalString.replace('How', 'Where')

console.log(newString)
Where are you?

除了可以用另一個字符串值替換一個值之外,我們還可以使用正則表達式來製作replace() 更有力。例如,replace() 只影響第一個值,但我們可以使用 g (全局)標誌來捕獲一個值的所有實例,以及 i (不區分大小寫)標誌以忽略大小寫。

const originalString =
  "Javascript is a programming language. I'm learning javascript."

// Search string for "javascript" and replace with "JavaScript"
const newString = originalString.replace(/javascript/gi, 'JavaScript')

console.log(newString)
JavaScript is a programming language. I'm learning JavaScript.

這是使用正則表達式的一項非常常見的任務。訪問 Regexr 練習更多 RegEx 示例。

結論

字符串是最常用的數據類型之一,我們可以用它們做很多事情。

在本教程中,我們了解了字符串原語和 String 之間的區別 對象,如何索引字符串,以及如何使用字符串的內置方法和屬性來訪問字符、格式化文本以及查找和替換值。

有關字符串的更一般概述,請閱讀教程“如何在 JavaScript 中使用字符串”。


Tutorial JavaScript 教程
  1. 用於將文本拆分為句子並保留分隔符的 Javascript RegExp

  2. 在 Reactjs 中構建 Markdown 編輯器

  3. 成為初級全棧 Web 開發人員的 10 分鐘路線圖

  4. 服務器端渲染 Web 組件

  5. 學習 JavaScript 免費課程

  6. #30DaysOfAppwrite:Grafana 集成

  7. 16 個未充分利用的 Web 平台功能

  1. jQuery:同一事件的多個處理程序

  2. 無法設置新的 Faker 庫

  3. Passport.js 多重登錄系統無法正常工作

  4. 我重新設計了 Colt Steele 的 YelpCamp,並免費贈送他的 Bootcamp!

  5. 如何在 JavaScript 中反轉數字

  6. Deno 是新節點嗎?🦕

  7. 使用 Dexie.js 編寫漂亮的 IndexedDB 代碼

  1. NodeFrameworks.com 獲得了 GitHub 統計信息

  2. Youtube 視頻縮略圖 URL

  3. 開始學習計算和💻計算機科學(帶有 JavaScript 中的示例......和甜點!🍰)

  4. Netlify 函數 + 自定義 Utils