JavaScript string-methoden spiekbriefje (live)

JavaScript string-methoden spiekbriefje

JavaScript string-methoden spiekbriefje (live resultaten) | We.Inc

Typ uw eigen tekst en zie elke gangbare JavaScript string-methode er live op draaien: slice, split, replace met regex, padStart, trim en meer, plus validatiehelpers om te kopiëren.

JavaScript-strings hebben ingebouwde methoden om te zoeken (includes, indexOf, startsWith), te knippen (slice, substring, split), hoofdletters te wijzigen, spaties weg te halen, op te vullen en te vervangen. Geen ervan wijzigt de oorspronkelijke tekst: strings zijn immutable, dus elke methode geeft een nieuwe waarde terug. Typ hieronder een willekeurige tekst en zie elke methode erop draaien terwijl u bewerkt.

De methoden die het meest worden gebruikt

Taak
Methode
Voorbeeldresultaat

Bevat het een woord?
"web site".includes("site")

Eerste 3 tekens
"website".slice(0, 3)
"web"

Laatste teken
"website".at(-1)

Woorden naar een array
"a b c".split(" ")

Elke match vervangen
"a-b-c".replaceAll("-", "/")

Een getal aanvullen met nullen
"7".padStart(3, "0")

Een lijst met methoden lezen leert u namen; de methoden op uw eigen tekst uitvoeren leert u hun gedrag. Het live overzicht hieronder past elke methode toe op wat u typt, zodat randgevallen zoals negatieve indexen, lege strings en herhaalde spaties meteen zichtbaar worden. Daarna volgen regex-vervangingen en kleine validatiehelpers die u in een formulier kunt plakken.

Typ of plak tekst in het invoerveld. Elke rij van het live overzicht wordt opnieuw berekend terwijl u typt.
Filter de rijen op naam of op groep, zoals Zoeken of Wijzigen, om snel een methode te vinden.
Bewerk het regex-patroon en de vervanging om replace met capture groups op uw tekst te testen.
Kopieer de hulpfuncties verderop voor trimmen, slugs, title case en e-mailcontroles.

Gebruik liever slice dan substr. MDN markeert substr als verouderd, en slice accepteert negatieve posities vanaf het einde.
replaceAll met een regex heeft de g-vlag nodig, anders gooit het een TypeError.
Gebruik localeCompare bij het sorteren van namen, zodat accenten en hoofdletters gesorteerd worden zoals lezers verwachten.
length telt UTF-16-code-units, dus één emoji kan een lengte van 2 geven. Spreid de string in een array om code points te tellen.
Ketenen is prima omdat elke aanroep een nieuwe string teruggeeft: text.trim().toLowerCase().replaceAll(" ", "-").

Veelgestelde vragen

Wat is het verschil tussen slice en substring?

Beide knippen een deel uit een string van een startindex tot een eindindex. slice behandelt een negatief getal als terugtellen vanaf het einde, dus slice(-3) geeft de laatste drie tekens terug. substring behandelt negatieve getallen als nul en verwisselt de argumenten als de start groter is dan het einde.

Hoe vervang ik alle voorkomens in een string?

Gebruik replaceAll("old", "new") voor platte tekst, of replace met een globale regex zoals text.replace(/old/g, "new"). Als u replace aanroept met een gewone string, wordt alleen de eerste match gewijzigd.

Hoe gebruik ik capture groups in een vervanging?

Zet delen van het patroon tussen haakjes en verwijs ernaar als $1, $2 in de vervangende string. Naar benoemde groepen, geschreven als (?<year>\d{4}), verwijst u met $<year>, en $& voegt de volledige match in.

Hoe controleer ik of een string een geldig e-mailadres is?

Een eenvoudig patroon vangt duidelijke typefouten op, maar geen enkele regex volgt de e-mailregels volledig. De betrouwbaarste controle in de browser is een input met type="email", die het eigen patroon van de HTML-standaard toepast, gevolgd door het versturen van een bevestigingsbericht.

Wijzigen string-methoden de oorspronkelijke variabele?

Nee. Een stringwaarde kan na het aanmaken niet meer worden gewijzigd. Methoden zoals toUpperCase geven een nieuwe string terug, dus u moet het resultaat toewijzen: name = name.toUpperCase().

Indexen, negatieve getallen en tekens

Posities beginnen bij 0. at() en slice() accepteren negatieve getallen die terugtellen vanaf het einde, charAt() en toegang met vierkante haken doen dat niet. Daarom is text.at(-1) de nette manier om het laatste teken te pakken.
JavaScript slaat tekst op als UTF-16. De meeste letters nemen één unit in beslag, maar emoji en sommige schriften nemen er twee, dus length, slice en charAt kunnen zo'n teken doormidden splitsen. Array.from(text) of een for...of-lus loopt in plaats daarvan door echte code points.

Zoekmethoden die verschillende dingen teruggeven

includes, startsWith en endsWith geven een boolean. indexOf en lastIndexOf geven een positie of -1 terug. search neemt een regex en geeft ook een positie terug. match geeft de matches terug, en matchAll geeft een iterator van elke match met zijn groepen.
Kies op basis van wat de volgende regel nodig heeft. Als u alleen op ja of nee vertakt, leest een boolean-methode duidelijker dan een index vergelijken met -1.

Gebruikersinvoer opschonen

Trim voordat u valideert, want geplakte tekst bevat vaak spaties of regeleinden aan de uiteinden. Normaliseer hoofdletters voordat u vergelijkt, en voeg reeksen witruimte samen met replace(/\s+/g, " ").
Validatie in de browser is een gemak voor de bezoeker. Herhaal dezelfde controles op de server, want verzoeken kunnen ook helemaal zonder uw pagina worden verstuurd.

Vervangen met een reguliere expressie

Een regex-vervanging kan patronen matchen in plaats van vaste tekst, delen herschikken met capture groups, of de vervanging berekenen met een functie.

Speciale patronen in de vervangende string

Patroon
Voegt in

De volledige match

De tekst van een genummerde capture group

$<name>
De tekst van een benoemde capture group

Een letterlijk dollarteken

Regex-vervangpatronen die u vaker zult gebruiken

Elke regel werkt op zichzelf. Met de functievorm kunt u elke match omvormen, hier door de eerste letter van elk woord een hoofdletter te geven.

Helpers voor validatie en opschonen

Slug, title case, inkorten en een eenvoudige e-mailcontrole

Kleine functies zonder afhankelijkheden voor formulieren en URL's. De e-mailcontrole vangt alleen duidelijke fouten op; bevestig adressen door een bericht te sturen.

Methoden om te vermijden

Oudere methoden die MDN als verouderd markeert

Methode
Gebruik in plaats daarvan

substr(start, length)
slice(start, start + length)

anchor(), bold(), link() en de andere HTML-wrappermethoden
Bouw elementen met de DOM en stel textContent in

Inspecteren

Aantal UTF-16-code-units

Inspecteren

Teken op een positie; negatieve getallen tellen vanaf het einde

Inspecteren

Laatste teken

Inspecteren

Teken op een positie, lege string als die buiten bereik ligt

Inspecteren

Nummer van de UTF-16-code-unit op een positie

Zoeken

true als de tekst ergens voorkomt

Zoeken

true als de string met de tekst begint

Zoeken

true als de string op de tekst eindigt

Zoeken

Eerste positie van de tekst, of -1

Zoeken

Laatste positie van de tekst, of -1

Zoeken

Positie van de eerste regex-match, of -1

Zoeken

Array van elke match met een globale regex

Knippen

Deel tussen twee posities

Knippen

De laatste vijf tekens

Knippen

Deel tussen twee posities, geen negatieve getallen

Knippen

Array van stukken, gesplitst op een scheidingsteken

Wijzigen

Elke letter als hoofdletter

Wijzigen

Elke letter als kleine letter

Wijzigen

Verwijdert witruimte aan beide uiteinden

Wijzigen

Verwijdert witruimte aan het begin

Wijzigen

Verwijdert witruimte aan het einde

Wijzigen

Vult de voorkant aan tot een bepaalde lengte

Wijzigen

Vult het einde aan tot een bepaalde lengte

Wijzigen

De string n keer aan zichzelf gekoppeld

Wijzigen

Vervangt alleen de eerste match

Wijzigen

Vervangt elke match

Wijzigen

Voegt strings samen; + doet hetzelfde

Wijzigen

Unicode-normaalvorm, handig vóór het vergelijken

Vergelijken

Negatief, 0 of positief voor de sorteervolgorde

Alle

Live overzicht van string-methoden

Typ tekst en elke methode hieronder draait erop terwijl u bewerkt.

Uw tekst (str)

Methoden filteren

bijvoorbeeld pad of trim

Methodegroep

String-methoden per groep ({n} getoond)

Aanroep

Groep

Wat het doet

Resultaat

Probeer een regex-vervanging

Bewerk een patroon, vlaggen en vervanging om het op uw eigen tekst te testen.

Tekst

Patroon

Vlaggen

Vervanging

Ongeldig patroon: {msg}

Gratis beginnen · Geen creditcard nodig

Gerelateerd: Gidsen

Product

Voor wie

Functies

Bronnen

Bedrijf

Sitemap