JS-zelfstudie

JS HOME JS Introductie JS Waarheen? JS-uitgang JS-verklaringen JS-syntaxis JS-opmerkingen JS-variabelen JS Let JS Const JS-operators JS Rekenen JS-opdracht JS-gegevenstypen JS-functies JS-objecten JS-evenementen JS-snaren JS String-methoden JS String zoeken JS String-sjablonen JS-nummers JS-nummermethoden JS-arrays JS-array-methoden JS-array sorteren JS-array-iteratie JS Array Const JS-datums JS-datumnotaties JS Datum Ophaalmethoden Methoden voor het instellen van JS-datum JS Math JS Willekeurig JS Booleans JS-vergelijkingen JS-voorwaarden JS-schakelaar JS Loop For JS-lus voor binnen JS Loop For Of JS-lus terwijl JS Break JS-iteraties JS-sets JS-kaarten JS Typeof JS Type conversie JS Bitwise JS RegExp JS-fouten JS-bereik JS Hijsen JS strikte modus JS dit trefwoord JS-pijlfunctie JS-lessen JS JSON JS-foutopsporing JS-stijlgids JS-best practices JS-fouten JS-prestaties JS Gereserveerde Woorden

JS-versies

JS-versies JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-geschiedenis

JS-objecten

Objectdefinities Objecteigenschappen Objectmethoden Objectweergave Objectaccessoires Objectconstructeurs Objectprototypes Object-Iterables Objectsets Objectkaarten Objectreferentie

JS-functies

Functiedefinities Functieparameters: Functie-aanroep Functie-oproep: Functie Toepassen Functie Sluitingen

JS-lessen

Klas Intro Klasse Overerving Klasse Statisch

JS Asynchrone

JS-callbacks JS asynchroon JS belooft JS Async/Wachten

JS HTML DOM

DOM Intro DOM-methoden DOM-document DOM-elementen DOM HTML DOM-formulieren DOM-CSS DOM-animaties DOM-evenementen DOM-gebeurtenisluisteraar DOM-navigatie DOM-knooppunten DOM-collecties DOM-knooppuntlijsten

JS-browserstuklijst

JS-venster JS-scherm JS-locatie JS-geschiedenis JS-navigator JS pop-upwaarschuwing JS-timing JS-koekjes

JS Web API's

Introductie web-API Web Forms API Webgeschiedenis-API Webopslag-API Web Worker-API Web Fetch-API Webgeolocatie-API

JS AJAX

Ajax-intro AJAX XMLHttp Ajax-verzoek Ajax-reactie AJAX XML-bestand AJAX PHP Ajax ASP AJAX-database AJAX-toepassingen Ajax-voorbeelden

JS JSON

JSON-intro JSON-syntaxis JSON versus XML JSON-gegevenstypen JSON ontleden JSON Stringify JSON-objecten JSON-arrays JSON-server JSON PHP JSON HTML JSON JSONP

JS versus jQuery

jQuery-kiezers jQuery HTML jQuery CSS jQuery DOM

JS-graphics

JS-graphics JS Canvas JS Plotly JS Chart.js JS Google-kaart JS D3.js

JS-voorbeelden

JS-voorbeelden JS HTML DOM JS HTML-invoer JS HTML-objecten JS HTML-evenementen JS-browser JS-editor JS-oefeningen JS-quiz JS-certificaat

JS-referenties

JavaScript-objecten HTML DOM-objecten


JavaScript -tekenreeksmethoden


Stringmethodes helpen je om met strings te werken.


Stringmethoden en eigenschappen

Primitieve waarden, zoals "John Doe", kunnen geen eigenschappen of methoden hebben (omdat het geen objecten zijn).

Maar met JavaScript zijn methoden en eigenschappen ook beschikbaar voor primitieve waarden, omdat JavaScript primitieve waarden als objecten behandelt bij het uitvoeren van methoden en eigenschappen.


JavaScript-tekenreekslengte

De lengtheigenschap retourneert de lengte van een tekenreeks:

Voorbeeld

let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = txt.length;

Stringdelen extraheren

Er zijn 3 methoden om een ​​deel van een string te extraheren:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

JavaScript-tekenreekssegment ()

slice() extraheert een deel van een string en retourneert het geëxtraheerde deel in een nieuwe string.

De methode heeft 2 parameters: de startpositie en de eindpositie (eind niet inbegrepen).

Dit voorbeeld snijdt een deel van een string uit positie 7 naar positie 12 (13-1):

Voorbeeld

let str = "Apple, Banana, Kiwi";
let part = str.slice(7, 13);

Opmerking

JavaScript telt posities vanaf nul.

Eerste positie is 0.

Tweede positie is 1.

Als een parameter negatief is, wordt de positie geteld vanaf het einde van de string.

Dit voorbeeld snijdt een deel van een string uit positie -12 naar positie -6:

Voorbeeld

let str = "Apple, Banana, Kiwi";
let part = str.slice(-12, -6);

Als u de tweede parameter weglaat, snijdt de methode de rest van de string weg:

Voorbeeld

let part = str.slice(7);

of, vanaf het einde geteld:

Voorbeeld

let part = str.slice(-12);


JavaScript-tekenreeks subtekenreeks()

substring()lijkt op slice().

Het verschil is dat substring()er geen negatieve indexen kunnen worden geaccepteerd.

Voorbeeld

let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);

Als u de tweede parameter weglaat, substring()wordt de rest van de string weggelaten.


JavaScript-tekenreeks substr()

substr()lijkt op slice().

Het verschil is dat de tweede parameter de lengte van het geëxtraheerde deel aangeeft.

Voorbeeld

let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);

Als u de tweede parameter weglaat, substr()wordt de rest van de string weggelaten.

Voorbeeld

let str = "Apple, Banana, Kiwi";
let part = str.substr(7);

Als de eerste parameter negatief is, telt de positie vanaf het einde van de tekenreeks.

Voorbeeld

let str = "Apple, Banana, Kiwi";
let part = str.substr(-4);

Stringinhoud vervangen

De replace()methode vervangt een opgegeven waarde door een andere waarde in een tekenreeks:

Voorbeeld

let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

Opmerking

De replace()methode verandert de string waarop deze wordt aangeroepen niet.

De replace()methode retourneert een nieuwe string.

Standaard replace()vervangt de methode alleen de eerste overeenkomst:

Voorbeeld

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

Standaard is de replace()methode hoofdlettergevoelig. Het schrijven van MICROSOFT (met hoofdletters) werkt niet:

Voorbeeld

let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "W3Schools");

Gebruik een reguliere expressie met een /ivlag (ongevoelig) om hoofdletterongevoelig te vervangen:

Voorbeeld

let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "W3Schools");

Opmerking

Reguliere expressies worden zonder aanhalingstekens geschreven.

Om alle overeenkomsten te vervangen, gebruikt u een reguliere expressie met een /gvlag (algemene overeenkomst):

Voorbeeld

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g, "W3Schools");

Opmerking

In het hoofdstuk JavaScript Reguliere Expressies leert u veel meer over reguliere expressies .


Converteren naar hoofdletters en kleine letters

Een string wordt geconverteerd naar hoofdletters met toUpperCase():

Een string wordt geconverteerd naar kleine letters met toLowerCase():


JavaScript-tekenreeks toUpperCase()

Voorbeeld

let text1 = "Hello World!";
let text2 = text1.toUpperCase();

JavaScript-tekenreeks toLowerCase()

Voorbeeld

let text1 = "Hello World!";       // String
let text2 = text1.toLowerCase();  // text2 is text1 converted to lower

JavaScript-tekenreeks concat()

concat() verbindt twee of meer strings:

Voorbeeld

let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);

De concat()methode kan worden gebruikt in plaats van de plus-operator. Deze twee regels doen hetzelfde:

Voorbeeld

text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");

Opmerking

Alle tekenreeksmethoden retourneren een nieuwe tekenreeks. Ze wijzigen de originele string niet.

Formeel zei:

Strings zijn onveranderlijk: Strings kunnen niet worden gewijzigd, alleen worden vervangen.


JavaScript String trim()

De trim()methode verwijdert witruimte aan beide zijden van een string:

Voorbeeld

let text1 = "      Hello World!      ";
let text2 = text1.trim();

JavaScript String Padding

ECMAScript 2017 heeft twee String-methoden toegevoegd: padStart en padEndom opvulling aan het begin en aan het einde van een string te ondersteunen.


JavaScript-tekenreeks padStart()

Voorbeeld

let text = "5";
let padded = text.padStart(4,0);

Browserondersteuning

padStart() is een ECMAScript 2017-functie.

Het wordt ondersteund in alle moderne browsers:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padStart() wordt niet ondersteund in Internet Explorer.


JavaScript-tekenreeks padEnd()

Voorbeeld

let text = "5";
let padded = text.padEnd(4,0);

Browserondersteuning

padEnd() is een ECMAScript 2017-functie.

Het wordt ondersteund in alle moderne browsers:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padEnd() wordt niet ondersteund in Internet Explorer.


Tekenreeksen extraheren

Er zijn 3 methoden om tekenreeksen te extraheren:

  • charAt(position)
  • charCodeAt(position)
  • Toegang tot eigendom [ ]

JavaScript-tekenreeks charAt()

De charAt()methode retourneert het teken op een opgegeven index (positie) in een tekenreeks:

Voorbeeld

let text = "HELLO WORLD";
let char = text.charAt(0);

JavaScript-tekenreeks charCodeAt()

De charCodeAt()methode retourneert de unicode van het teken bij een opgegeven index in een tekenreeks:

De methode retourneert een UTF-16-code (een geheel getal tussen 0 en 65535).

Voorbeeld

let text = "HELLO WORLD";
let char = text.charCodeAt(0);

Toegang tot eigendom

ECMAScript 5 (2009) geeft toegang tot eigenschappen [ ] op strings:

Voorbeeld

let text = "HELLO WORLD";
let char = text[0];

Opmerking

Toegang tot eigendom kan een beetje onvoorspelbaar zijn:

  • Het laat strings eruitzien als arrays (maar dat zijn ze niet)
  • If no character is found, [ ] returns undefined, while charAt() returns an empty string.
  • It is read only. str[0] = "A" gives no error (but does not work!)

Example

let text = "HELLO WORLD";
text[0] = "A";    // Gives no error, but does not work

Converting a String to an Array

If you want to work with a string as an array, you can convert it to an array.

JavaScript String split()

A string can be converted to an array with the split() method:

Example

text.split(",")    // Split on commas
text.split(" ")    // Split on spaces
text.split("|")    // Split on pipe

If the separator is omitted, the returned array will contain the whole string in index [0].

If the separator is "", the returned array will be an array of single characters:

Example

text.split("")

Complete String Reference

For a complete String reference, go to our:

Complete JavaScript String Reference.

The reference contains descriptions and examples of all string properties and methods.

Test Yourself With Exercises

Exercise:

Convert the text into an UPPERCASE text:

let txt = "Hello World!";
txt = txt.;