Wie wird der erste Buchstabe einer Zeichenkette in JavaScript großgeschrieben?

Question

Wie kann ich den ersten Buchstaben einer Zeichenkette in Großbuchstaben umwandeln, ohne die Großschreibung der anderen Buchstaben zu ändern?

Zum Beispiel:

• "this is a test" "This is a test"
• "the Eiffel Tower" "The Eiffel Tower"
• "/index.html" "/index.html"

Answer 1

Die grundlegende Lösung ist:

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

console.log(capitalizeFirstLetter('foo')); // Foo

Einige andere Antworten ändern String.prototype (diese Antwort auch), aber ich würde davon jetzt abraten, wegen der Wartbarkeit (schwer herauszufinden, wo die Funktion zur prototype und könnte zu Konflikten führen, wenn anderer Code denselben Namen verwendet / ein Browser in Zukunft eine native Funktion mit demselben Namen hinzufügt).

...und dann gibt es noch so viel mehr zu dieser Frage, wenn man die Internationalisierung betrachtet, wie diese verblüffend gute Antwort (unten begraben) zeigt.

Wenn Sie mit Unicode-Codepunkten anstelle von Codeeinheiten arbeiten wollen (z. B. um Unicode-Zeichen außerhalb der Basic Multilingual Plane zu behandeln), können Sie die Tatsache nutzen, dass String#[@iterator] arbeitet mit Codepunkten, und Sie können mit toLocaleUpperCase um die lokal korrekte Großschreibung zu erhalten:

const capitalizeFirstLetter = ([ first, ...rest ], locale = navigator.language) =>
  first.toLocaleUpperCase(locale) + rest.join('')

console.log(
  capitalizeFirstLetter('foo'), // Foo
  capitalizeFirstLetter(""), // "" (correct!)
  capitalizeFirstLetter("italya", 'tr') // talya" (correct in Turkish Latin!)
)

Noch mehr Internationalisierungsoptionen finden Sie in der Originalantwort unten .

Answer 2

Hier ist ein eher objektorientierter Ansatz:

Object.defineProperty(String.prototype, 'capitalize', {
  value: function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
  },
  enumerable: false
});

Sie rufen die Funktion etwa so auf:

"hello, world!".capitalize();

Das erwartete Ergebnis ist:

"Hello, world!"

Answer 3

In CSS:

p::first-letter {
    text-transform:capitalize;
}

Answer 4

Hier ist eine verkürzte Version der beliebten Antwort, die den ersten Buchstaben erhält, indem sie die Zeichenkette als Array behandelt:

function capitalize(s)
{
    return s[0].toUpperCase() + s.slice(1);
}

Update

Laut den Kommentaren unten funktioniert dies nicht im IE 7 oder darunter.

Update 2:

Zur Vermeidung von undefined für leere Zeichenketten (siehe Kommentar von @njzk2 unten ), können Sie auf eine leere Zeichenkette prüfen:

function capitalize(s)
{
    return s && s[0].toUpperCase() + s.slice(1);
}

ES-Version

const capitalize = s => s && s[0].toUpperCase() + s.slice(1)

// to always return type string event when s may be falsy other than empty-string
const capitalize = s => (s && s[0].toUpperCase() + s.slice(1)) || ""

Answer 5

Wenn Sie an der Leistung einiger verschiedener Methoden interessiert sind, können Sie diese hier einsehen:

Hier sind die schnellsten Methoden auf der Grundlage von dieser jsperf-Test (in der Reihenfolge vom schnellsten zum langsamsten).

Wie Sie sehen können, sind die ersten beiden Methoden in Bezug auf die Leistung im Wesentlichen vergleichbar, während die Änderung der String.prototype ist bei weitem die langsamste in Bezug auf die Leistung.

// 10,889,187 operations/sec
function capitalizeFirstLetter(string) {
    return string[0].toUpperCase() + string.slice(1);
}

// 10,875,535 operations/sec
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

// 4,632,536 operations/sec
function capitalizeFirstLetter(string) {
    return string.replace(/^./, string[0].toUpperCase());
}

// 1,977,828 operations/sec
String.prototype.capitalizeFirstLetter = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}