Wie erstelle ich den ersten Buchstaben eines Strings in JavaScript in Großbuchstaben?

3761

Wie mache ich den ersten Buchstaben eines Strings in Großbuchstaben, ändere aber nicht die Groß- und Kleinschreibung eines der anderen Buchstaben?

Zum Beispiel:

  • "this is a test" -> "This is a test"
  • "the Eiffel Tower" -> "The Eiffel Tower"
  • "/index.html" -> "/index.html"
Robert Wills
quelle
12
Underscore hat ein Plugin namens underscore.string , das dieses und eine Reihe anderer großartiger Tools enthält.
Aaron
was ist mit:return str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();});
Muhammad Umer
111
Einfacher:string[0].toUpperCase() + string.substring(1)
dr.dimitru
7
`${s[0].toUpperCase()}${s.slice(1)}`
Noego
([initial, ...rest]) => [initial.toUpperCase(), ...rest].join("")
6онстантин Ван

Antworten:

5809

Die Grundlösung ist:

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

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

Einige andere Antworten ändern sich String.prototype(diese Antwort wurde auch verwendet), aber ich würde jetzt aus Gründen der Wartbarkeit davon abraten (schwer herauszufinden, wo die Funktion zum hinzugefügt wird, prototypeund könnte Konflikte verursachen, wenn anderer Code denselben Namen / einen Browser verwendet fügt in Zukunft eine native Funktion mit demselben Namen hinzu).

... und dann gibt es so viel mehr zu dieser Frage, wenn man die Internationalisierung betrachtet, wie diese erstaunlich gute Antwort (unten vergraben) zeigt.

Wenn Sie mit Unicode-Codepunkten anstelle von Codeeinheiten arbeiten möchten (z. B. um Unicode-Zeichen außerhalb der mehrsprachigen Grundebene zu verarbeiten), können Sie die Tatsache nutzen, dass String#[@iterator]mit Codepunkten funktioniert, und Sie können verwenden toLocaleUpperCase, um ein Gebietsschema-korrekter Großbuchstaben zu erhalten:

function capitalizeFirstLetter([ first, ...rest ], locale = navigator.language) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

console.log(capitalizeFirstLetter('foo')); // Foo
console.log(capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉")); // "𐐎𐐲𐑌𐐼𐐲𐑉" (correct!)
console.log(capitalizeFirstLetter("italya", 'tr')); // İtalya" (correct in Turkish Latin!)

Weitere Internationalisierungsoptionen finden Sie in der Originalantwort unten .

Steve Harrison
quelle
9
Teilzeichenfolge wird in mehr Browsern als
Teilzeichenfolge
6
zu karim79 hinzufügen - es ist wahrscheinlich übertrieben, es zu einer Funktion zu machen, da Javascript das Gleiche mit der Variablen macht, ohne dass die Funktion umbrochen wird. Ich nehme an, es wäre klarer, eine Funktion zu verwenden, aber ansonsten ist sie nativ. Warum sollte man sie mit einem Funktions-Wrapper komplizieren?
Ross
18
Sollten wir nicht auch das Slice (1) toLowerCase?
Hasen
177
Nein, weil das OP dieses Beispiel gegeben hat : the Eiffel Tower -> The Eiffel Tower. Außerdem heißt die Funktion capitaliseFirstLetternicht capitaliseFirstLetterAndLowerCaseAllTheOthers.
Ban-Geoengineering
22
Niemand kümmert sich um wichtige Regeln der OOP? - Bearbeiten Sie niemals Objekte, die Sie nicht besitzen? . string[0].toUpperCase() + string.substring(1)
Übrigens
1350

Hier ist ein objektorientierterer Ansatz:

String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

Sie würden die Funktion folgendermaßen aufrufen:

"hello world".capitalize();

Mit der erwarteten Ausgabe ist:

"Hello world" 
Steve Hansell
quelle
24
Ich mag diese Lösung, weil sie wie Ruby ist und Ruby süß ist! :) Ich return this.charAt(0).toUpperCase() + this.substring(1).toLowerCase();
schreibe
164
In dieser Welt nach Prototype.js wird nicht empfohlen, die nativen Objekte zu ändern oder zu erweitern.
Ryan
191
@rxgx - Der Boogeyman "Nicht verlängern" beginnt jetzt zu sterben (Gott sei Dank), und die Leute ziehen ihre Köpfe aus dem jSand und erkennen, dass es sich nur um eine Sprachfunktion handelt. Nur weil Prototype.js Objekt selbst für kurze Zeit erweitert wurde, bedeutet dies nicht, dass das Erweitern von Natives schlecht ist. Sie sollten dies nicht tun, wenn Sie Code für einen unbekannten Verbraucher schreiben (wie ein Analyseskript, das auf zufälligen Websites ausgeführt wird), aber ansonsten ist es in Ordnung.
csuwldcat
43
@csuwldcat Was ist, wenn eine andere Bibliothek, die Sie verwenden, ihre eigene Großschreibung hinzufügt, ohne dass Sie es wissen? Das Erweitern von Prototypen ist eine schlechte Form, unabhängig davon, ob Prototype.js dies getan hat oder nicht. Mit ES6 können Sie mit intrinsics Ihren Kuchen auch essen. Ich denke, Sie könnten den "Boogeyman" verwirren, der für Leute stirbt, die Unterlegscheiben herstellen, die der ECMASCRIPT-Spezifikation entsprechen. Diese Shims sind vollkommen in Ordnung, da eine andere Bibliothek, die einen Shim hinzugefügt hat, ihn auf die gleiche Weise implementieren würde. Das Hinzufügen eigener nicht spezifikationsbezogener Eigenschaften sollte jedoch vermieden werden.
Justin Meyer
43
Einheimische zu verlängern ist EXTREM schlechte Praxis. Selbst wenn Sie sagen "Oh, ich werde diesen Code niemals mit irgendetwas anderem verwenden", werden Sie (oder jemand anderes) dies wahrscheinlich tun. Dann werden sie drei Tage damit verbringen, einen seltsamen mathematischen Fehler herauszufinden, weil jemand Number.money () erweitert hat, um mit Währungen umzugehen, die sich geringfügig von denen Ihrer anderen Bibliothek unterscheiden. Im Ernst, ich habe dies in einem großen Unternehmen gesehen und es lohnt sich nicht, jemanden zu debuggen, um einen Bibliotheksentwickler herauszufinden, der mit den Prototypen der Eingeborenen durcheinander ist.
Phreakhead
573

In CSS:

p:first-letter {
    text-transform:capitalize;
}
sam6ber
quelle
80
OP fragt nach einer JS-Lösung.
Antonio Max
129
$ ('# mystring_id'). text (string) .css ('text-transform', 'großschreiben');
DonMB
21
Darüber hinaus wirkt sich dies nur auf die Anzeige der Zeichenfolge aus, nicht auf den tatsächlichen Wert. Wenn es sich um eine Form handelt, z. B. wird der Wert weiterhin unverändert übermittelt.
Dmansfield
12
Diese Antwort half mir zu erkennen, dass eine CSS-Lösung wirklich besser zu dem passt, was ich tat. @dudewad: Die Antwort sollte wahrscheinlich einen Haftungsausschluss geben, dass dies keine JS-Lösung ist, aber je nach Bedarf angemessener sein könnte.
Joshden
58
Für ungefähr 80% der Zuschauer, die zu dieser Frage kommen, ist dies die beste Antwort. Keine Antwort auf die Frage , sondern auf das Problem .
Jivan
290

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

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

Aktualisieren:

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

Update 2:

Um undefinedleere Zeichenfolgen zu vermeiden (siehe Kommentar von @ njzk2 unten ), können Sie nach einer leeren Zeichenfolge suchen :

function capitalize(s)
{
    return s && s[0].toUpperCase() + s.slice(1);
}
Joelvh
quelle
23
Dies funktioniert in IE <8 nicht, da diese Browser die Zeichenfolgenindizierung nicht unterstützen. IE8 selbst unterstützt dies, jedoch nur für Zeichenfolgenliterale - nicht für Zeichenfolgenobjekte.
Mathias Bynens
52
Wen kümmert es, IE7 Markt ist weniger als 5%! und das sind wahrscheinlich die alte Maschine deines Gremmas und Grempas. Ich sage Funktionscode FTW!
vsync
@MathiasBynens Wissen Sie, ob dies ältere Nicht-IE-Browser oder nur IE7 betrifft? Wenn 2014 keine anderen Browser von der Indizierung von String-Literalen betroffen sind, sollte dies in Ordnung sein. :)
Hexalys
3
@vsync Ich meinte nur, dass es je nach Benutzerdemografie manchmal (wenn auch dankbar immer weniger, wenn wir 2014 und darüber hinaus bestehen) rentabel ist, alte Browser wie IE7 zu unterstützen ...
joshuahedlund
2
@ njzk2, um eine leere Zeichenfolge zu behandeln, könnten Sie auf diese aktualisieren: return s && s[0].toUpperCase() + s.slice(1);
joelvh
188

Wenn Sie an der Leistung einiger verschiedener Methoden interessiert sind:

Hier sind die schnellsten Methoden, die auf diesem jsperf-Test basieren (geordnet vom schnellsten zum langsamsten).

Wie Sie sehen können, sind die ersten beiden Methoden hinsichtlich der Leistung im Wesentlichen vergleichbar, während die Änderung der Methode hinsichtlich der Leistung String.prototypebei weitem am langsamsten ist.

// 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);
}

Geben Sie hier die Bildbeschreibung ein

Josh Crozier
quelle
1
Es scheint, dass der Initialisierungscode auch keinen Unterschied macht: jsperf.com/capitalize-first-letter-of-string/2
user420667
6
Beachten Sie auch, dass das Ersetzen .slice(1)durch .substr(1)die Leistung noch weiter verbessern würde.
Przemek
2
Angemessene Überlegung. Beachten Sie jedoch, dass in vielen Fällen der Leistungseinbruch nicht einmal spürbar ist: Selbst der "langsamste" Ansatz würde 19.000 Zeichenfolgen in 10 ms verarbeiten. Nehmen Sie also diejenige, die für Sie am bequemsten zu bedienen ist.
Zitiert Eddie
1
Falls jemand neugierig ist (wie ich), wie sich die Leistung in den letzten vier Jahren verbessert hat, liegt die Betriebsgeschwindigkeit der dritten Funktion eines 2018 MacBook Pro bei 135.307.869, also im Wesentlichen 12,4-mal schneller.
Carlo Field
151

Für einen anderen Fall brauche ich es, um den ersten Buchstaben groß zu schreiben und den Rest in Kleinbuchstaben zu schreiben. Die folgenden Fälle haben mich veranlasst, diese Funktion zu ändern:

//es5
function capitalize(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
capitalize("alfredo")  // => "Alfredo"
capitalize("Alejandro")// => "Alejandro
capitalize("ALBERTO")  // => "Alberto"
capitalize("ArMaNdO")  // => "Armando"

// es6 using destructuring 
const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();
Alejandro
quelle
1
"... aber ändern Sie nicht den Fall eines der anderen Buchstaben". Dies ist keine korrekte Antwort auf die vom OP gestellte Frage.
Carlos Muñoz
2
@ CarlosMuñoz Wenn Sie den Eröffnungssatz lesen, sagt er, dass dies für einen anderen Fall ist.
TMH
3
@ TomHart Genau deshalb ist es keine Lösung für die Frage. Es sollte ein Kommentar oder eine andere Frage und Antwort sein
Carlos Muñoz
15
Da stimme ich Ihnen zu, aber ich kann sehen, dass viele Leute hier landen und versuchen, das zu tun, was diese Antwort bewirkt.
TMH
74

Dies ist die ECMAScript 6+ -Lösung für 2018 :

const str = 'the Eiffel Tower';
const newStr = `${str[0].toUpperCase()}${str.slice(1)}`;
console.log('Original String:', str); // the Eiffel Tower
console.log('New String:', newStr); // The Eiffel Tower

Sterling Bourne
quelle
5
.slice()ist langsamer als .substring(), str[0]wäre undefinedfür eine leere Zeichenfolge und die Verwendung von Vorlagenliteralen, um die beiden Teile zu verbinden, führt hier 8 Zeichen ein, während +nur 3 einführen würde.
Przemek
4
Der Sinn meiner Antwort Prz ist es, die neuen von ES6 unterstützten Funktionen vorzustellen, insbesondere Vorlagenliterale, die in anderen Beiträgen nicht erwähnt wurden. Die Idee von StackOverflow ist es, dem Sucher "Optionen" zu geben. Sie können das in dieser Antwort beschriebene Konzept der Vorlagenliterale mit Verbesserungen der Mikrogeschwindigkeit wie Substring v. Slice kombinieren, wenn für ihre Anwendung diese zusätzlichen gesparten Millisekunden erforderlich sind. Meine Antwort enthält auch keine Unit-Tests, was zeigt, dass Sie eine StackOverflow-Antwort niemals direkt kopieren sollten. Ich gehe davon aus, dass der Entwickler meine Antwort nimmt und sie anpasst.
Sterling Bourne
Sie profitieren hier nicht von der Verwendung von Vorlagenliteralen, und das ${}fügt nur Rauschen hinzu. const newStr = str[0].toUpperCase() + str.slice(1);ist leichter zu lesen.
Boris
1
Stimmen Sie zu, dann nicht zuzustimmen, was leichter zu lesen ist.
Sterling Bourne
67

Wenn Sie bereits verwenden (oder in Betracht ziehen), lodashist die Lösung einfach:

_.upperFirst('fred');
// => 'Fred'

_.upperFirst('FRED');
// => 'FRED'

_.capitalize('fred') //=> 'Fred'

Siehe ihre Dokumente: https://lodash.com/docs#capitalize

_.camelCase('Foo Bar'); //=> 'fooBar'

https://lodash.com/docs/4.15.0#camelCase

_.lowerFirst('Fred');
// => 'fred'

_.lowerFirst('FRED');
// => 'fRED'

_.snakeCase('Foo Bar');
// => 'foo_bar'

Vanille js für den ersten Großbuchstaben:

function upperCaseFirst(str){
    return str.charAt(0).toUpperCase() + str.substring(1);
}
chovy
quelle
11
Ich denke, die Präferenz sollte für Vanilla Js sein, da die meisten Leute nicht ein ganzes Framework herunterladen, nur um einen String groß zu schreiben.
GGG
7
In all meinen bisherigen Projekten habe ich nie lodash verwendet. Vergessen Sie auch nicht, dass die meisten Leute auf Google auf dieser Seite enden und das Auflisten eines Frameworks als Alternative in Ordnung ist, aber nicht als Hauptantwort.
GGG
2
Da andere Antworten Vanille js verwenden, ist es schön, eine Antwort wie diese zu haben, da viele von uns lodash / Unterstrich verwenden.
Lu Roman
1
Dies ist nicht die richtige Antwort, da das OP dies jetzt in Javascript verlangt, nicht in einer Javascript-Bibliothek, die eine gesamte Bibliothek als Abhängigkeit von Ihrem Projekt importiert. Benutze es nicht.
Dudewad
1
Die Frage des OP ist am Ende meiner Antwort in Vanille.
Chovy
62

Großschreiben Sie den ersten Buchstaben aller Wörter in einer Zeichenfolge:

function ucFirstAllWords( str )
{
    var pieces = str.split(" ");
    for ( var i = 0; i < pieces.length; i++ )
    {
        var j = pieces[i].charAt(0).toUpperCase();
        pieces[i] = j + pieces[i].substr(1);
    }
    return pieces.join(" ");
}
Dan
quelle
14
Frage erneut lesen: Ich möchte das erste Zeichen einer Zeichenfolge groß schreiben, aber die Groß- und Kleinschreibung der anderen Buchstaben nicht ändern.
JimmyPena
2
Ich weiß, dass ich es getan habe. Ich würde eine Sache hinzufügen, falls die gesamte Zeichenfolge groß geschrieben wird: Teile [i] = j + Teile [i] .substr (1) .toLowerCase ();
Malovich
4
Eine andere Lösung für diesen Fall: Funktion capitaliseFirstLetters (s) {return s.split ("") .map (Funktion (w) {return w.charAt (0) .toUpperCase () + w.substr (1)}). Join ("")} Kann ein netter Einzeiler sein, wenn er nicht in eine Funktion eingefügt wird.
Luke Channings
Wäre besser, zuerst die ganze Zeichenfolge in Kleinbuchstaben zu
schreiben
Abgesehen davon, dass diese Funktion die Frage nicht beantwortet, ist sie auch überkompliziert. s => s.split(' ').map(x => x[0].toUpperCase() + x.slice(1)).join(' ')
OverCoder
48

Wir könnten den ersten Charakter mit einem meiner Favoriten bekommen RegExp, sieht aus wie ein süßer Smiley:/^./

String.prototype.capitalize = function () {
  return this.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

Und für alle Kaffee-Junkies:

String::capitalize = ->
  @replace /^./, (match) ->
    match.toUpperCase()

... und für alle, die denken, dass es einen besseren Weg gibt, dies zu tun, ohne native Prototypen zu erweitern:

var capitalize = function (input) {
  return input.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};
yckart
quelle
2
Es gibt eine bessere Möglichkeit, dies zu tun, ohne den String-Prototyp zu ändern.
Big McLargeHuge
2
@ davidkennedy85 Sicher! Aber das ist der einfache Weg, nicht der beste Weg ... ;-)
yckart
Sehr geehrte Damen und Herren, es gibt eine Million Antworten auf diese Frage! Ihre Lösung sieht in es6 noch besser aus. 'Answer'.replace(/^./, v => v.toLowerCase())
stwilz
47

Verwenden:

var str = "ruby java";

console.log(str.charAt(0).toUpperCase() + str.substring(1));

Es wird "Ruby java"an die Konsole ausgegeben .

AMIC MING
quelle
Einzeilige Lösung.
Ahmad Sharif
45

Wenn Sie underscore.js oder Lo-Dash verwenden , bietet die Bibliothek underscore.string Zeichenfolgenerweiterungen, einschließlich Großbuchstaben:

_.capitalize (string) Konvertiert den ersten Buchstaben des Strings in Großbuchstaben.

Beispiel:

_.capitalize("foo bar") == "Foo bar"
andersh
quelle
3
Seit Version 3.0.0 verfügt Lo-Dash standardmäßig über diese Zeichenfolgenmethode. Genau wie in dieser Antwort beschrieben : _.capitalize("foo") === "Foo".
Bardzusny
Es gibt auch nützliche Funktionen von underscore.js, die aufgerufen werden humanize. Es wandelt eine unterstrichene, kamelisierte oder dasherisierte Zeichenfolge in eine humanisierte um. Entfernt auch Anfangs- und End-Leerzeichen und das Postfix '_id'.
Stepan Zakharov
1
Ab Version 4 * schreibt Lodash auch jeden zweiten Buchstaben in Kleinbuchstaben (), sei vorsichtig!
Igor Loskutov
45
String.prototype.capitalize = function(allWords) {
   return (allWords) ? // if all words
      this.split(' ').map(word => word.capitalize()).join(' ') : //break down phrase to words then  recursive calls until capitalizing all words
      this.charAt(0).toUpperCase() + this.slice(1); // if allWords is undefined , capitalize only the first word , mean the first char of the whole string
}

Und dann:

 "capitalize just the first word".capitalize(); ==> "Capitalize just the first word"
 "capitalize all words".capitalize(true); ==> "Capitalize All Words"

Update Nov.2016 (ES6), nur zum Spaß:

const capitalize = (string = '') => [...string].map(    //convert to array with each item is a char of string by using spread operator (...)
    (char, index) => index ? char : char.toUpperCase()  // index true means not equal 0 , so (!index) is the first char which is capitalized by `toUpperCase()` method
 ).join('')                                             //return back to string

dann capitalize("hello") // Hello

Abdennour TOUMI
quelle
3
Ich denke, dies ist aus zwei Gründen eine schlechte Lösung: Das Ändern des Prototyps eines Grundelements ist eine schlechte Idee. Wenn sich die Spezifikation ändert und sie sich dafür entscheiden, "Großschreibung" als neuen Proto-Eigenschaftsnamen zu wählen, brechen Sie die Kernsprachenfunktionalität. Außerdem ist der gewählte Methodenname schlecht. Auf den ersten Blick würde ich denken, dass dies die gesamte Zeichenfolge kapitalisieren wird. Die Verwendung eines aussagekräftigeren Namens wie ucFirst von PHP oder ähnlichem ist möglicherweise eine bessere Idee.
Dudewad
Die andere ES6-Antwort ist einfacher : const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();.
Dan Dascalescu
44

KURZESTE 3 Lösungen, 1 und 2 behandeln Fälle, wenn sZeichenfolge ist "", nullund undefined:

 s&&s[0].toUpperCase()+s.slice(1)        // 32 char

 s&&s.replace(/./,s[0].toUpperCase())    // 36 char - using regexp

'foo'.replace(/./,x=>x.toUpperCase())    // 31 char - direct on string, ES6

Kamil Kiełczewski
quelle
42

Nur CSS

p::first-letter {
  text-transform: uppercase;
}
  • Obwohl es aufgerufen wird ::first-letter, gilt es für das erste Zeichen , dh im Falle einer Zeichenfolge %awürde dieser Selektor für das erste Zeichen gelten %und als solches anicht großgeschrieben werden.
  • In IE9 + oder IE5.5 + wird es in der Legacy-Notation mit nur einem Doppelpunkt ( :first-letter) unterstützt.

ES2015 Einzeiler

Da es in ES2015 zahlreiche Antworten gibt, aber keine, die das ursprüngliche Problem effizient lösen würden, habe ich Folgendes gefunden:

const capitalizeFirstChar = str => str.charAt(0).toUpperCase() + str.substring(1);

Bemerkungen

  • parameters => functionist sogenannte Pfeilfunktion .
  • Ich ging mit Name capitalizeFirstCharstatt capitalizeFirstLetter, weil OP nicht nach Code gefragt hat, der den ersten Buchstaben in der gesamten Zeichenfolge großschreibt, sondern das allererste Zeichen (wenn es ein Buchstabe ist, natürlich).
  • constgibt uns die Möglichkeit, capitalizeFirstCharals konstant zu deklarieren , was erwünscht ist, da Sie als Programmierer Ihre Absichten immer explizit angeben sollten.
  • In der von mir durchgeführten Benchmark gab es keinen signifikanten Unterschied zwischen string.charAt(0)und string[0]. Beachten Sie jedoch, dass string[0]dies undefinedfür eine leere Zeichenfolge gilt. Daher sollte diese neu geschrieben werden string && string[0], was im Vergleich zur Alternative viel zu ausführlich ist.
  • string.substring(1)ist schneller als string.slice(1).

Benchmark

  • 4.956.962 ops / s ± 3,03% für diese Lösung,
  • 4.577.946 ops / s ± 1,2% für die am häufigsten gewählte Antwort.
  • Erstellt mit JSBench.me in Google Chrome 57.

Lösungsvergleich

Przemek
quelle
@Green: es tut , werden Sie sicher , dass Sie Wähler mit zwei Doppelpunkten angegeben?
Przemek
1
Sie möchten das Pluszeichen (+) in ES6 eigentlich nicht als Verkettungsmethode verwenden. Sie sollten Vorlagenliterale verwenden: eslint.org/docs/rules/prefer-template
Sterling Bourne
42

Es gibt eine sehr einfache Möglichkeit, es durch Ersetzen zu implementieren . Für ECMAScript 6:

'foo'.replace(/^./, str => str.toUpperCase())

Ergebnis:

'Foo'
Kleine Roys
quelle
1
Die mit Abstand beste Antwort und zusätzliche Punkte für die Darstellung der Regex-Lambda-Syntax. Ich mag dieses besonders, da es überall fließend ausgeschnitten und eingefügt werden kann.
Wade Hatler
Die Verwendung /^[a-z]/iist besser als die Verwendung, .da die vorherige nicht versucht, andere Zeichen als Alphabete zu ersetzen
Code Maniac
38

In CSS scheint es einfacher zu sein:

<style type="text/css">
    p.capitalize {text-transform:capitalize;}
</style>
<p class="capitalize">This is some text.</p>

Dies stammt aus der CSS- Texttransformationseigenschaft (bei W3Schools ).

Ryan
quelle
29
@Simon Es wird nicht angegeben, dass die Zeichenfolge notwendigerweise als Teil eines HTML-Dokuments ausgegeben wird - CSS wird nur dann von Nutzen sein, wenn dies der Fall ist.
Adam Hepton
9
Adam, stimmt, aber ich würde vermuten, dass über 95% des Javascript mit HTML & CSS verwendet wird. Leider wird bei der Anweisung "großschreiben" tatsächlich jedes Wort großgeschrieben, sodass JS immer noch nur den ersten Buchstaben der Zeichenfolge großschreiben muss.
Simon East
18
Falsch, Dinesh. Er sagte das erste Zeichen der Zeichenfolge .
Simon East
81
Diese Antwort ist trotz einer lächerlichen Anzahl von Gegenstimmen einfach falsch, da sie den ersten Buchstaben jedes Wortes groß schreibt . @ Ryan, du erhältst ein Disziplin-Abzeichen, wenn du es löschst . Bitte tun Sie dies.
Dan Dascalescu
10
Stimme @DanDascalescu zu - Ryans Antwort ist völlig falsch.
Timo
38
var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1);
Zianwar
quelle
38

Ich habe in den vorhandenen Antworten auf Fragen im Zusammenhang mit Codepunkten für Astralebenen oder der Internationalisierung keine Erwähnung gesehen . "Großbuchstaben" bedeuten nicht in jeder Sprache dasselbe, wenn ein bestimmtes Skript verwendet wird.

Anfangs sah ich keine Antworten auf Probleme im Zusammenhang mit Codepunkten für Astralebenen. Es gibt eine , aber sie ist ein bisschen begraben (wie diese, denke ich!)


Die meisten der vorgeschlagenen Funktionen sehen folgendermaßen aus:

function capitalizeFirstLetter(str) {
  return str[0].toUpperCase() + str.slice(1);
}

Einige Großbuchstaben liegen jedoch außerhalb des BMP (mehrsprachige Grundebene, Codepunkte U + 0 bis U + FFFF). Nehmen Sie zum Beispiel diesen Deseret-Text:

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉"); // "𐐶𐐲𐑌𐐼𐐲𐑉"

Das erste Zeichen wird hier nicht groß geschrieben, da die Array-indizierten Eigenschaften von Zeichenfolgen nicht auf "Zeichen" oder Codepunkte * zugreifen. Sie greifen auf UTF-16-Codeeinheiten zu. Dies gilt auch beim Schneiden - die Indexwerte zeigen auf Codeeinheiten.

Es ist zufällig, dass UTF-16-Codeeinheiten 1: 1 mit USV-Codepunkten innerhalb von zwei Bereichen sind, U + 0 bis U + D7FF und U + E000 bis U + FFFF einschließlich. Die meisten Groß- und Kleinschreibung fallen in diese beiden Bereiche, aber nicht alle.

Ab ES2015 wurde der Umgang damit etwas einfacher. String.prototype[@@iterator]liefert Zeichenfolgen, die Codepunkten ** entsprechen. So können wir zum Beispiel Folgendes tun:

function capitalizeFirstLetter([ first, ...rest ]) {
  return [ first.toUpperCase(), ...rest ].join('');
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

Für längere Saiten ist dies wahrscheinlich nicht besonders effizient *** - wir müssen den Rest nicht wirklich wiederholen. Wir könnten verwenden String.prototype.codePointAt, um an diesen ersten (möglichen) Buchstaben zu gelangen, aber wir müssten immer noch bestimmen, wo das Slice beginnen soll. Eine Möglichkeit, das Wiederholen des Restes zu vermeiden, besteht darin, zu testen, ob sich der erste Codepunkt außerhalb des BMP befindet. Ist dies nicht der Fall, beginnt das Slice bei 1, und wenn dies der Fall ist, beginnt das Slice bei 2.

function capitalizeFirstLetter(str) {
  const firstCP = str.codePointAt(0);
  const index = firstCP > 0xFFFF ? 2 : 1;

  return String.fromCodePoint(firstCP).toUpperCase() + str.slice(index);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

Sie könnten stattdessen bitweise Mathematik verwenden > 0xFFFF, aber es ist wahrscheinlich einfacher, diesen Weg zu verstehen, und beide würden dasselbe erreichen.

Wir können diese Funktion auch in ES5 und darunter ausführen, indem wir diese Logik bei Bedarf etwas weiter ausbauen. In ES5 gibt es keine intrinsischen Methoden für die Arbeit mit Codepunkten. Daher müssen wir manuell testen, ob die erste Codeeinheit eine Ersatzeinheit ist ****:

function capitalizeFirstLetter(str) {
  var firstCodeUnit = str[0];

  if (firstCodeUnit < '\uD800' || firstCodeUnit > '\uDFFF') {
    return str[0].toUpperCase() + str.slice(1);
  }

  return str.slice(0, 2).toUpperCase() + str.slice(2);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

Zu Beginn habe ich auch Überlegungen zur Internationalisierung erwähnt. Einige davon sind sehr schwer zu erklären, da sie nicht nur Kenntnisse darüber erfordern, was Sprache verwendet wird, sondern möglicherweise auch spezifische Kenntnisse der Wörter in der Sprache erfordern. Beispielsweise wird der irische Digraph "mb" am Anfang eines Wortes als "mB" großgeschrieben. Ein anderes Beispiel, das deutsche Eszett, beginnt nie ein Wort (afaik), hilft aber dennoch, das Problem zu veranschaulichen. Das Kleinbuchstaben-Eszett ("ß") wird in "SS" großgeschrieben, "SS" kann jedoch in "ß" oder "ss" in Kleinbuchstaben geschrieben werden. Sie benötigen Out-of-Band-Kenntnisse der deutschen Sprache, um zu wissen, was richtig ist!

Das bekannteste Beispiel für diese Art von Problemen ist wahrscheinlich das Türkische. Im türkischen Latein ist die Großbuchstabe von i İ, während die Kleinbuchstabe von I ı ist - es sind zwei verschiedene Buchstaben. Glücklicherweise haben wir eine Möglichkeit, dies zu erklären:

function capitalizeFirstLetter([ first, ...rest ], locale) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

capitalizeFirstLetter("italy", "en") // "Italy"
capitalizeFirstLetter("italya", "tr") // "İtalya"

In einem Browser wird das am meisten bevorzugte Sprach-Tag des Benutzers durch angezeigt navigator.language, eine Liste in der Reihenfolge seiner Präferenz wird unter gefunden navigator.languagesund die Sprache eines bestimmten DOM-Elements kann (normalerweise) Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HEREin mehrsprachigen Dokumenten abgerufen werden .

In Agenten, die Unicode-Eigenschaftszeichenklassen in RegExp unterstützen, die in ES2018 eingeführt wurden, können wir die Dinge weiter bereinigen, indem wir direkt ausdrücken, an welchen Zeichen wir interessiert sind:

function capitalizeFirstLetter(str, locale=navigator.language) {
  return str.replace(/^\p{CWU}/u, char => char.toLocaleUpperCase(locale));
}

Dies könnte ein wenig optimiert werden, um auch die Großschreibung mehrerer Wörter in einer Zeichenfolge mit ziemlich guter Genauigkeit zu handhaben. Die ZeicheneigenschaftCWU oder Changes_When_Uppercased stimmt mit allen Codepunkten überein , die sich in Großbuchstaben ändern. Das können wir versuchen , mit einem titlecased digraph Zeichen wie die niederländische ij zum Beispiel:

capitalizeFirstLetter('ijsselmeer'); // "IJsselmeer"

Zum Zeitpunkt des Schreibens (Februar 2020) hat Firefox / Spidermonkey noch keine der in den letzten zwei Jahren eingeführten RegExp-Funktionen implementiert *****. Sie können den aktuellen Status dieser Funktion in der Kangax-Kompatibilitätstabelle überprüfen . Babel ist in der Lage, RegExp-Literale mit Eigenschaftsreferenzen auf äquivalente Muster ohne diese zu kompilieren. Beachten Sie jedoch, dass der resultierende Code enorm sein kann.


Personen, die diese Frage stellen, werden sich aller Wahrscheinlichkeit nach nicht mit der Kapitalisierung oder Internationalisierung von Deseret befassen. Es ist jedoch gut, sich dieser Probleme bewusst zu sein, da es eine gute Chance gibt, dass Sie ihnen irgendwann begegnen, auch wenn sie derzeit keine Bedenken haben. Es handelt sich nicht um "Randfälle", oder vielmehr, sie sind per Definition keine Randfälle - es gibt ein ganzes Land, in dem die meisten Menschen sowieso Türkisch sprechen, und das Zusammenführen von Codeeinheiten mit Codepunkten ist eine ziemlich häufige Fehlerquelle (insbesondere bei in Bezug auf Emoji). Sowohl Zeichenfolgen als auch Sprache sind ziemlich kompliziert!


* Die Codeeinheiten von UTF-16 / UCS2 sind auch Unicode-Codepunkte in dem Sinne, dass z. B. U + D800 technisch gesehen ein Codepunkt ist, aber das bedeutet es hier nicht ... irgendwie ... obwohl es hübsch wird verschwommen. Was die Surrogate definitiv nicht sind, sind USVs (Unicode-Skalarwerte).

** Wenn eine Ersatzcodeeinheit „verwaist“ ist - dh nicht Teil eines logischen Paares -, können Sie auch hier noch Ersatzzeichen erhalten.

*** könnte sein. Ich habe es nicht getestet. Wenn Sie nicht festgestellt haben, dass Kapitalisierung ein bedeutender Engpass ist, würde ich wahrscheinlich nicht ins Schwitzen kommen - wählen Sie, was Ihrer Meinung nach am klarsten und lesbarsten ist.

**** Eine solche Funktion möchte möglicherweise sowohl die erste als auch die zweite Codeeinheit anstatt nur die erste testen, da es möglich ist, dass die erste Einheit eine verwaiste Leihmutter ist. Zum Beispiel würde die Eingabe "\ uD800x" das X so wie es ist großschreiben, was erwartet werden kann oder nicht.

***** Hier ist das Bugzilla-Problem, wenn Sie den Fortschritt direkter verfolgen möchten.

Semikolon
quelle
2
Diese Antwort muss nach vorne verschoben werden.
Rúnar Berg
Danke @ RúnarBerg - da mich Ihr Kommentar daran erinnerte, las ich ihn noch einmal durch und stellte fest, dass ich einen endgültigen Fall und eine erwähnenswerte Lösung ausgelassen hatte. Auch versucht, einige der Terminologie besser zu klären.
Semikolon
Tolle Antwort .....
Ben Aston
Diese Antwort ist ausgezeichnet, ich wünschte, ich könnte sie besser bewerten.
David Barker
37

Es ist immer besser, diese Art von Dingen zuerst mit CSS zu behandeln. Wenn Sie etwas mit CSS lösen können, versuchen Sie es zuerst und versuchen Sie dann JavaScript, um Ihre Probleme zu lösen. Versuchen Sie es in diesem Fall mit :first-letterCSS und wenden Sie es antext-transform:capitalize;

Versuchen Sie also, eine Klasse dafür zu erstellen, damit Sie sie global verwenden können, zum Beispiel: .first-letter-uppercaseund fügen Sie etwas wie das Folgende in Ihr CSS ein:

.first-letter-uppercase:first-letter {
    text-transform:capitalize;
}

Die alternative Option ist auch JavaScript. Das Beste ist also Folgendes:

function capitalizeTxt(txt) {
  return txt.charAt(0).toUpperCase() + txt.slice(1); //or if you want lowercase the rest txt.slice(1).toLowerCase();
}

und nenne es wie:

capitalizeTxt('this is a test'); // return 'This is a test'
capitalizeTxt('the Eiffel Tower'); // return 'The Eiffel Tower'
capitalizeTxt('/index.html');  // return '/index.html'
capitalizeTxt('alireza');  // return 'Alireza'

Wenn Sie es immer wieder verwenden möchten, hängen Sie es besser an den nativen Javascript-String an, also wie folgt:

String.prototype.capitalizeTxt = String.prototype.capitalizeTxt || function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

und nenne es wie folgt:

'this is a test'.capitalizeTxt(); // return 'This is a test'
'the Eiffel Tower'.capitalizeTxt(); // return 'The Eiffel Tower'
'/index.html'.capitalizeTxt();  // return '/index.html'
'alireza'.capitalizeTxt();  // return 'Alireza'
Alireza
quelle
36

Wenn Sie All-Caps-Text neu formatieren möchten, möchten Sie möglicherweise die anderen Beispiele als solche ändern:

function capitalize (text) {
    return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
}

Dadurch wird sichergestellt, dass der folgende Text geändert wird:

TEST => Test
This Is A TeST => This is a test
Monokrom
quelle
Wahrscheinlich erwähnenswert, dass dies auch Dinge wie Akronyme in Kleinbuchstaben umwandelt, also vielleicht nicht die beste Idee in den meisten Fällen
Monokrom
Hat GAMITG wirklich eine Bearbeitung vorgenommen, um ein Stück Leerzeichen aus einem Nicht-Code-Teil des Beitrags zu entfernen? O_O
Monokrom
Übrigens, dies wird Akronyme in Großbuchstaben auflösen. Seien Sie also vorsichtig, Sie alle <3
Monokrom
34
function capitalize(s) {
    // returns the first letter capitalized + the string from index 1 and out aka. the rest of the string
    return s[0].toUpperCase() + s.substr(1);
}


// examples
capitalize('this is a test');
=> 'This is a test'

capitalize('the Eiffel Tower');
=> 'The Eiffel Tower'

capitalize('/index.html');
=> '/index.html'
Fredrik A.
quelle
Fertig @Ram. Enthalten sind auch Beispiele.
Fredrik A.
Wie ist das besser als die Antwort von 2009 ?
Dan Dascalescu
1
Es ist nicht @DanDascalescu. Ich nehme an, Sie könnten argumentieren, dass substr/ substringetwas semantischer ist als das slice, aber das ist nur eine Frage der Präferenz. Ich habe jedoch Beispiele mit den in der Frage angegebenen Zeichenfolgen eingefügt, was eine nette Geste ist, die im Beispiel von '09 nicht vorhanden ist. Ich denke ehrlich, es läuft darauf hinaus, dass ich mit 15 Jahren Karma auf StackOverflow will;)
Fredrik A.
34

Hier ist eine Funktion namens ucfirst () (kurz für "Großbuchstaben"):

function ucfirst(str) {
    var firstLetter = str.substr(0, 1);
    return firstLetter.toUpperCase() + str.substr(1);
}

Sie können eine Zeichenfolge groß schreiben, indem Sie ucfirst ("eine Zeichenfolge") aufrufen, z.

ucfirst("this is a test") --> "This is a test"

Es funktioniert, indem die Saite in zwei Teile geteilt wird. In der ersten Zeile wird firstLetter herausgezogen und in der zweiten Zeile wird firstLetter durch Aufrufen von firstLetter.toUpperCase () großgeschrieben und mit dem Rest der Zeichenfolge verknüpft , die durch Aufrufen von str.substr (1) gefunden wird .

Sie könnten denken, dass dies für eine leere Zeichenfolge fehlschlagen würde, und in einer Sprache wie C müssten Sie dies berücksichtigen. Wenn Sie jedoch in JavaScript eine Teilzeichenfolge einer leeren Zeichenfolge verwenden, erhalten Sie nur eine leere Zeichenfolge zurück.

Robert Wills
quelle
4
Verwenden Sie String.substring () oder String.slice () ... Verwenden Sie nicht substr () - es ist veraltet.
James
7
@ 999: Wo steht, dass substr()das veraltet ist? Es ist noch nicht einmal drei Jahre später, geschweige denn 2009, als Sie diesen Kommentar abgegeben haben.
Dan Dascalescu
substr()wird möglicherweise von keiner gängigen ECMAScript-Implementierung als veraltet markiert (ich bezweifle, dass es nicht so schnell verschwinden wird), aber es ist nicht Teil der ECMAScript-Spezifikation. In der 3. Ausgabe der Spezifikation wird dies im nicht normativen Anhang erwähnt, um "eine einheitliche Semantik für solche Eigenschaften vorzuschlagen, ohne die Eigenschaften oder ihre Semantik in diesen Standard aufzunehmen".
Peter Rust
2
3 Methoden zu haben , die das gleiche tun ( substring, substrund slice) sind zu viele, IMO. Ich benutze slicees immer, weil es negative Indizes unterstützt, nicht das verwirrende Arg-Swapping-Verhalten aufweist und seine API slicein anderen Sprachen ähnlich ist.
Peter Rust
29
String.prototype.capitalize = function(){
    return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase();
    } );
};

Verwendungszweck:

capitalizedString = someString.capitalize();

Dies ist eine Textzeichenfolge => Dies ist eine Textzeichenfolge

Murat Kucukosman
quelle
20
Reguläre Ausdrücke sind dafür übertrieben.
Anthony Sottile
+1, das habe ich wirklich gesucht. Es gibt einen kleinen Fehler, es sollte sein return.this.toLocaleLowerCase().replace(...
Tomdemuyt
+1, ich habe diese Seite auf der Suche nach einer Javascript-Version von phps ucfirst gefunden. Ich vermute, dass die meisten Leute sie so finden.
Benubird
@ DanDascalescu Ich fand das nützlich, also +1 Utilitarismus und -1 Anal-Retentivität. Er hat ein Beispiel beigefügt, damit seine Funktion klar ist.
Travis Webb
String.prototype.capitalize = function(){ return this.replace( /(^|\s)[a-z]/g , function(m){ return m.toUpperCase(); }); }; Ich überarbeite Ihren Code ein wenig, Sie brauchen nur eine erste Übereinstimmung.
IGRACH
28
var str = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);
MaxEcho
quelle
21

Kasse dieser Lösung:

var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // returns Master 
Raju Bera
quelle
3
Dies sollte die akzeptierte Antwort sein. Die Hauptlösung sollte kein Framework wie Unterstrich verwenden.
Adam McArthur
3
Speichern Sie einige Tastenanschläge;)stringVal.replace(/^./, stringVal[0].toUpperCase());
Alfredo Delgado
1
Regex sollte nicht verwendet werden, wenn dies nicht erforderlich ist. Es ist sehr ineffizient und macht den Code auch nicht prägnanter. Darüber hinaus stringVal[0]wäre undefinedfür leer stringVal, und als solche würde der Versuch, auf Eigentum zuzugreifen .toUpperCase(), einen Fehler auslösen.
Przemek
20
yourString.replace(/^[a-z]/, function(m){ return m.toUpperCase() });

(Sie können es in eine Funktion einkapseln oder sogar zum String-Prototyp hinzufügen, wenn Sie es häufig verwenden.)

Simon
quelle
5
Obwohl dies einige Stimmen hat, ist dies bei weitem die langsamste Lösung, die hier veröffentlicht wird. Ich habe einen kleinen Speedtest mit den beliebtesten Antworten aus diesem Beitrag zusammengestellt, hier: forwebonly.com/…
Robin van Baalen
@RobinvanBaalen Dein Link ist jetzt kaputt. Hast du eine aktualisierte?
Brad
1
Regexp ist dafür übertrieben, bevorzugen Sie das einfachere: str.charAt (0) .toUpperCase () + str.slice (1)
Simon
@Brad leider nicht
Robin van Baalen
Wenn Sie Ihr Problem mit Regex lösen möchten, treten häufig zwei Probleme auf.
Przemek
19

Die ucfirstFunktion funktioniert, wenn Sie es so machen.

function ucfirst(str) {
    var firstLetter = str.slice(0,1);
    return firstLetter.toUpperCase() + str.substring(1);
}

Danke JP für die Erklärung.

Raphie
quelle
2
schöner Name für die Funktion! Der Name ist identisch mit dem PHP-Äquivalent. Es gibt tatsächlich eine ganze Bibliothek von PHP-Funktionen, die in JS geschrieben sind. Es heißt PHP.js und ist auf http://phpjs.org
Hussam
11
Ein Liner:string[0].toUpperCase() + string.substring(1)
dr.dimitru
@TarranJones hier ist kugelsicherer (string[0] || '').toUpperCase() + string.substring(1)
Einzeiler
@ dr.dimitru: Statt idiomatisch (string[0] || '')könnte man einfach string.charAt(0).
Przemek
18

Sie können es in einer Zeile wie folgt tun

string[0].toUpperCase() + string.substring(1)
Qwerty
quelle
Diese Antwort wurde bereits 2009 gegeben .
Dan Dascalescu
17
yourString.replace(/\w/, c => c.toUpperCase())

Ich fand diese Pfeilfunktion am einfachsten. Ersetzen entspricht dem ersten Buchstaben ( \w) Ihrer Zeichenfolge und konvertiert es in Großbuchstaben. Nichts schickeres nötig.

Wolf
quelle
1
Dies sollte die akzeptierte Antwort sein, stattdessen ist es fast die letzte, seit SO immer wieder veraltete Fragen vergibt. Übrigens ist es /./aus zwei Gründen besser : /\w/Alle vorherigen Nicht-Buchstaben-Zeichen werden übersprungen (aus @@ abc wird @@ Abc), und dann funktioniert es nicht mit Nicht-Latein-Zeichen
Cristian Traìna