toLowerCase() en toUpperCase()

Deze methods zetten tekst om naar kleine letters of hoofdletters.

const tekst = 'Hallo Wereld';
console.log(tekst.toLowerCase()); // 'hallo wereld'
console.log(tekst.toUpperCase()); // 'HALLO WERELD'

Hoe werken deze methods?

Voorbeeld: hoofdletter-ongevoelige vergelijking

const input = 'APPEL';
const zoekterm = 'appel';

console.log(input === zoekterm); // false

console.log(input.toLowerCase() === zoekterm.toLowerCase()); // true

Meer voorbeelden

// Zoekfunctie in array
const producten = ['Laptop', 'Muis', 'Toetsenbord'];
const zoekterm = 'laptop';

const gevonden = producten.filter(product => 
  product.toLowerCase() === zoekterm.toLowerCase()
);
console.log(gevonden); // ['Laptop']

// Eerste letter hoofdletter maken
const naam = 'jan';
const netjes = naam.charAt(0).toUpperCase() + naam.slice(1);
console.log(netjes); // 'Jan'

trim()

De method trim() verwijdert spaties en andere witruimte aan het begin en einde van een string.

const input = '  hallo  ';
console.log(input.trim());        // 'hallo'
console.log(input.length);        // 9
console.log(input.trim().length); // 5

Wat verwijdert trim()

const tekst = '  hallo  wereld  ';
console.log(tekst.trim()); // 'hallo  wereld'

Waarom trim() handig is

const gebruikerInput = '  jan@email.com  ';

if (gebruikerInput === 'jan@email.com') {
  console.log('Match zonder trim'); // geen match
}

if (gebruikerInput.trim() === 'jan@email.com') {
  console.log('Match met trim'); // wel match
}

Template Literals (backticks)

Met template literals maak je strings met variabelen erin. Je gebruikt backticks (`) in plaats van aanhalingstekens.

const naam = 'Jan';
const leeftijd = 25;
const bericht = `Hallo, ik ben ${naam} en ik ben ${leeftijd} jaar oud.`;
console.log(bericht);

Vergelijking met de oude manier

Oude manier met plus-tekens:

const naam = 'Jan';
const leeftijd = 25;
const bericht = 'Hallo, ik ben ' + naam + ' en ik ben ' + leeftijd + ' jaar oud.';

Nieuwe manier met template literals:

const naam = 'Jan';
const leeftijd = 25;
const bericht = `Hallo, ik ben ${naam} en ik ben ${leeftijd} jaar oud.`;

Meer mogelijkheden

Berekeningen

const prijs = 10;
const aantal = 3;
console.log(`Totaal: €${prijs * aantal}`);

Functies aanroepen

const naam = 'jan';
console.log(`Hallo ${naam.toUpperCase()}`);

Meerdere regels

const naam = 'Jan';
const leeftijd = 25;

const html = `
  

    
${naam}
    
Leeftijd: ${leeftijd}
  
`;

includes()

Met includes() controleer je of een string een bepaalde tekst bevat.

const tekst = 'Hallo wereld';
console.log(tekst.includes('wereld')); // true
console.log(tekst.includes('aarde'));  // false

Werking van includes()

const bericht = 'Welkom bij onze cursus JavaScript';
console.log(bericht.includes('JavaScript'));  // true
console.log(bericht.includes('javascript'));  // false

console.log(bericht.toLowerCase().includes('javascript')); // true

Voorbeelden

Eenvoudige check

const email = 'jan@gmail.com';

if (!email.includes('@')) {
  console.log('Ongeldig e-mailadres');
}

Zoekfunctie in array

const producten = [
  'Laptop Gaming RGB',
  'Muis Draadloos',
  'Toetsenbord Mechanisch',
  'Monitor 4K'
];

const zoekterm = 'gaming';

const resultaten = producten.filter(product =>
  product.toLowerCase().includes(zoekterm.toLowerCase())
);

console.log(resultaten);

Verschil met array includes()

const kleuren = ['rood', 'groen', 'blauw'];
console.log(kleuren.includes('rood')); // true

const tekst = 'De kleur is rood';
console.log(tekst.includes('rood')); // true

startsWith() en endsWith()

Met deze methods controleer je of een string begint of eindigt met bepaalde tekst.

const bestandsnaam = 'document.pdf';
console.log(bestandsnaam.startsWith('doc'));   // true
console.log(bestandsnaam.endsWith('.pdf'));    // true
console.log(bestandsnaam.endsWith('.txt'));    // false

Werking

Voorbeelden

Bestandstype controleren

const bestand = 'foto.jpg';

if (bestand.endsWith('.jpg') || bestand.endsWith('.png')) {
  console.log('Afbeelding');
}

Prefix voor telefoonnummers

const telefoonnummer = '+31612345678';

if (telefoonnummer.startsWith('+31')) {
  console.log('Nederlands nummer');
}

Filteren met startsWith()

const woorden = ['appel', 'ananas', 'banaan', 'aardbei'];

const aWoorden = woorden.filter(woord => woord.startsWith('a'));
console.log(aWoorden);

Samenvatting String Methods