Jak indexovat, rozdělovat a manipulovat s řetězci v JavaScriptu

Tento článek byl původně napsán pro DigitalOcean.

Úvod

řetězec je sekvence jednoho nebo více znaků, která se může skládat z písmen, číslic nebo symbolů. Ke každému znaku v řetězci JavaScript lze přistupovat pomocí čísla indexu a všechny řetězce mají dostupné metody a vlastnosti.

V tomto tutoriálu se naučíme rozdíl mezi řetězcovými primitivy a String objekt, jak jsou řetězce indexovány, jak přistupovat ke znakům v řetězci a běžné vlastnosti a metody používané u řetězců.

Primitiva řetězců a objekty řetězců

Nejprve si ujasníme dva typy strun. JavaScript rozlišuje mezi řetězcovým primitivem , neměnný datový typ a String objekt.

Abychom otestovali rozdíl mezi těmito dvěma, inicializujeme primitivum string a objekt typu string.

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

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

Můžeme použít typeof operátor k určení typu hodnoty. V prvním příkladu jsme jednoduše přiřadili řetězec k proměnné.

typeof stringPrimitive

string

Ve druhém příkladu jsme použili new String() vytvořit objekt typu string a přiřadit jej k proměnné.

typeof stringObject

object

Většinu času budete vytvářet řetězcová primitiva. JavaScript je schopen přistupovat a využívat vestavěné vlastnosti a metody String object wrapper, aniž byste ve skutečnosti změnili primitiva řetězce, které jste vytvořili, na objekt.

I když je tento koncept zpočátku trochu náročný, měli byste si být vědomi rozdílu mezi primitivním a objektovým. V podstatě existují metody a vlastnosti dostupné pro všechny řetězce a JavaScript na pozadí provede konverzi na objekt a zpět na primitivní pokaždé, když je zavolána metoda nebo vlastnost.

Jak jsou řetězce indexovány

Každý ze znaků v řetězci odpovídá číslu indexu počínaje 0 .

Pro demonstraci vytvoříme řetězec s hodnotou How are you? .

První znak v řetězci je H , což odpovídá indexu 0 . Poslední znak je ? , což odpovídá 11 . Znaky mezer mají také index, 3 a 7 .

Možnost přístupu ke každému znaku v řetězci nám poskytuje řadu způsobů, jak s řetězci pracovat a manipulovat s nimi.

Přístup k postavám

Ukážeme si, jak přistupovat ke znakům a indexům pomocí How are you? řetězec.

'How are you?'

Pomocí zápisu hranatých závorek můžeme přistupovat k libovolnému znaku v řetězci.

'How are you?'[5]

r

Můžeme také použít charAt() metoda pro vrácení znaku pomocí čísla indexu jako parametru.

'How are you?'.charAt(5)

r

Případně můžeme použít indexOf() vrátit číslo indexu podle prvního výskytu znaku.

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

1

Ačkoli "o" se v How are you? objeví dvakrát řetězec, indexOf() získá první instanci.

lastIndexOf() se používá k nalezení poslední instance.

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

9

U obou těchto metod můžete také hledat více znaků v řetězci. Vrátí indexové číslo prvního znaku v instanci.

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

4

slice() metoda na druhou stranu vrací znaky mezi dvě čísla indexu. První parametr bude počáteční číslo indexu a druhý parametr bude číslo indexu, kde má končit.

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

you

Všimněte si, že 11 je ? , ale ? není součástí vráceného výstupu. slice() vrátí to, co je mezi posledním parametrem, ale nezahrnuje jej.

Pokud není zahrnut druhý parametr, slice() vrátí vše od parametru po konec řetězce.

'How are you?'.slice(8)

you?

Abych to shrnul, charAt() a slice() pomůže vrátit hodnoty řetězce založené na číslech indexu a indexOf() a lastIndexOf() udělá opak a vrátí čísla indexu na základě zadaných znaků řetězce.

Zjištění délky řetězce

Pomocí length vlastnost, můžeme vrátit počet znaků v řetězci.

'How are you?'.length

String

Pamatujte, že length vlastnost vrací skutečný počet znaků počínaje 1, což vyjde na 12, nikoli konečné číslo indexu, které začíná na 0 a končí na 11 .

Převod na velká nebo malá písmena

Dvě vestavěné metody toUpperCase() a toLowerCase() jsou užitečné způsoby formátování textu a provádění textových porovnávání v JavaScriptu.

toUpperCase() převede všechny znaky na velká písmena.

'How are you?'.toUpperCase()

HOW ARE YOU?

toLowerCase() převede všechny znaky na malá písmena.

'How are you?'.toLowerCase()

how are you?

Tyto dvě metody formátování nevyžadují žádné další parametry.

Stojí za zmínku, že tyto metody nemění původní řetězec.

Rozdělení řetězců

JavaScript má velmi užitečnou metodu pro rozdělení řetězce podle znaku a vytvoření nového pole ze sekcí. Použijeme split() metoda k oddělení pole mezerou, reprezentovanou " " .

const originalString = 'How are you?'

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

console.log(splitString)

[ 'How', 'are', 'you?' ]

Nyní, když máme nové pole v splitString proměnnou, můžeme přistupovat ke každé sekci s indexovým číslem.

splitString[1]

are

Pokud je zadán prázdný parametr, split() vytvoří pole oddělené čárkami s každým znakem v řetězci.

Rozdělením řetězců můžete určit, kolik slov je ve větě, a použít tuto metodu například jako způsob, jak určit křestní jména a příjmení lidí.

Oříznutí mezer

JavaScript trim() metoda odstraňuje prázdné místo z obou konců řetězce, ale ne nikde mezi nimi. Mezery mohou být tabulátory nebo mezery.

const tooMuchWhitespace = '     How are you?     '

const trimmed = tooMuchWhitespace.trim()

console.log(trimmed)

How are you?

trim() metoda je jednoduchý způsob, jak provést běžný úkol odstranění přebytečných mezer.

Vyhledání a nahrazení hodnot řetězce

Můžeme vyhledat hodnotu v řetězci a nahradit ji novou hodnotou pomocí replace() metoda. První parametr bude hodnota, která má být nalezena, a druhý parametr bude hodnota, kterou se má nahradit.

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?

Kromě toho, že můžeme nahradit hodnotu jinou řetězcovou hodnotou, můžeme také použít regulární výrazy k vytvoření replace() silnější. Například replace() ovlivňuje pouze první hodnotu, ale můžeme použít g (globální) příznak pro zachycení všech výskytů hodnoty a i (nerozlišují se malá a velká písmena) příznak pro ignorování malých a velkých písmen.

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.

Toto je velmi běžný úkol, který využívá regulární výrazy. Navštivte Regexr a procvičte si další příklady RegEx.

Závěr

Řetězce jsou jedním z nejčastěji používaných datových typů a můžeme s nimi dělat hodně.

V tomto tutoriálu jsme se naučili rozdíl mezi řetězcovým primitivem a String objekt, jak jsou řetězce indexovány a jak používat vestavěné metody a vlastnosti řetězců pro přístup ke znakům, formátování textu a hledání a nahrazování hodnot.

Pro obecnější přehled o řetězcích si přečtěte tutoriál "Jak pracovat s řetězci v JavaScriptu."