Wie man den ersten Buchstaben in JavaScript groß schreibt: 5 Methoden + Geheimnisse

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

„Warum gibt es in JavaScript keine eingebaute Methode zur Kapitalisierung?“ – werden Sie fragen

Diese Frage quält Anfänger seit vielen Jahren. Auf Stack Overflow hat sie tausende Stimmen und Millionen von Aufrufen gesammelt. Man sollte meinen, was könnte einfacher sein, als den ersten Buchstaben groß zu schreiben? Aber in JavaScript wird so eine banale Operation zu einer kleinen Herausforderung.

In diesem Artikel geben wir nicht nur eine fertige Antwort. Wir analysieren fünf verschiedene Ansätze, vergleichen sie hinsichtlich Performance, Lesbarkeit und Zuverlässigkeit. Sie erfahren, warum str[0].toUpperCase() + str.slice(1) nicht immer die beste Wahl ist und wie man exotische Fälle wie leere Strings oder Unicode-Zeichen behandelt.

1. Der Klassiker: charAt + slice

Die beliebteste Antwort auf Stack Overflow – und das zu Recht. Diese Methode wird in 90% der Projekte verwendet.

function capitalizeFirst(str) {    return str.charAt(0).toUpperCase() + str.slice(1);}

console.log(capitalizeFirst('hello')); // 'Hello'console.log(capitalizeFirst('javaScript')); // 'JavaScript'

Warum charAt und nicht str[0]?

In alten Browsern (IE 8 und niedriger) gab der Indexzugriff str[0] bei einem leeren String undefined zurück. charAt(0) gibt immer einen leeren String zurück, was sicherer ist. Im modernen Code gibt es kaum einen Unterschied, aber die Gewohnheit, charAt zu verwenden, ist als Best Practice für Legacy-Unterstützung geblieben.

Vorteile: Einfachheit, Lesbarkeit, funktioniert überall.
Nachteile: Behandelt keine leeren Strings (gibt einen TypeError aus).

2. Moderner Ansatz: Template Literals + slice

Mit dem Aufkommen von ES6 kann der Code etwas eleganter gestaltet werden:

const capitalize = (str) => {    return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;};

Oder noch kürzer mit dem Optional Chaining Operator (ES2020):

const capitalize = (str) => str?.charAt(0).toUpperCase() + str.slice(1);

Der Operator ?. schützt vor null oder undefined, aber nicht vor einem leeren String. Bei einem leeren String gibt str?.charAt(0) "" zurück, und toUpperCase() auf einem leeren String ebenfalls "". Ergebnis: "" + "".slice(1) → "". Funktioniert korrekt!

3. Reguläre Ausdrücke: für Geeks und Ästheten

Die Methode mit Regex sieht wie Magie aus, ist aber sehr mächtig:

function capitalizeRegex(str) {    return str.replace(/^./, char => char.toUpperCase());}

console.log(capitalizeRegex('world')); // 'World'

Was passiert hier? ^. ist das „erste Zeichen des Strings“. Wir ersetzen es durch das Ergebnis des Aufrufs von toUpperCase().

Vorteile:

Keine Prüfung auf leeren String erforderlich (Regex macht einfach nichts)
Leicht erweiterbar: /^\\w/ – nur für Buchstaben, /^[a-z]/ – nur für lateinische Buchstaben

Nachteile:

20–30% langsamer (Tests auf jsPerf bestätigen dies)
Weniger lesbar für Anfänger

4. CSS-Methode: Wenn JS nicht nötig ist

Manchmal ist der beste Code der Code, den Sie nicht geschrieben haben. Wenn Sie mit der Textausgabe auf einer Seite arbeiten, kann die Kapitalisierung per CSS die ideale Lösung sein:

/* CSS */.capitalize {    text-transform: capitalize;}

// HTML<p class="capitalize">dieser text wird mit einem großbuchstaben beginnen</p>

Es gibt jedoch einen Haken: text-transform: capitalize schreibt jedes Wort groß, nicht nur das erste. Wenn nur das erste Wort benötigt wird – kommt man um JS nicht herum.