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"
javascript
string
letter
capitalize
Robert Wills
quelle
quelle
return str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();});
string[0].toUpperCase() + string.substring(1)
`${s[0].toUpperCase()}${s.slice(1)}`
([initial, ...rest]) => [initial.toUpperCase(), ...rest].join("")
Antworten:
Die Grundlösung ist:
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,prototype
und 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 verwendentoLocaleUpperCase
, um ein Gebietsschema-korrekter Großbuchstaben zu erhalten:Weitere Internationalisierungsoptionen finden Sie in der Originalantwort unten .
quelle
the Eiffel Tower -> The Eiffel Tower
. Außerdem heißt die FunktioncapitaliseFirstLetter
nichtcapitaliseFirstLetterAndLowerCaseAllTheOthers
.string[0].toUpperCase() + string.substring(1)
Hier ist ein objektorientierterer Ansatz:
Sie würden die Funktion folgendermaßen aufrufen:
Mit der erwarteten Ausgabe ist:
quelle
return this.charAt(0).toUpperCase() + this.substring(1).toLowerCase();
In CSS:
quelle
Hier ist eine verkürzte Version der beliebten Antwort, die den ersten Buchstaben erhält, indem die Zeichenfolge als Array behandelt wird:
Aktualisieren:
Laut den Kommentaren unten funktioniert dies nicht in IE 7 oder darunter.
Update 2:
Um
undefined
leere Zeichenfolgen zu vermeiden (siehe Kommentar von @ njzk2 unten ), können Sie nach einer leeren Zeichenfolge suchen :quelle
return s && s[0].toUpperCase() + s.slice(1);
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.prototype
bei weitem am langsamsten ist.quelle
.slice(1)
durch.substr(1)
die Leistung noch weiter verbessern würde.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:
quelle
Dies ist die ECMAScript 6+ -Lösung für 2018 :
quelle
.slice()
ist langsamer als.substring()
,str[0]
wäreundefined
fü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.${}
fügt nur Rauschen hinzu.const newStr = str[0].toUpperCase() + str.slice(1);
ist leichter zu lesen.Wenn Sie bereits verwenden (oder in Betracht ziehen),
lodash
ist die Lösung einfach:Siehe ihre Dokumente: https://lodash.com/docs#capitalize
_.camelCase('Foo Bar'); //=> 'fooBar'
https://lodash.com/docs/4.15.0#camelCase
Vanille js für den ersten Großbuchstaben:
quelle
Großschreiben Sie den ersten Buchstaben aller Wörter in einer Zeichenfolge:
quelle
s => s.split(' ').map(x => x[0].toUpperCase() + x.slice(1)).join(' ')
Wir könnten den ersten Charakter mit einem meiner Favoriten bekommen
RegExp
, sieht aus wie ein süßer Smiley:/^./
Und für alle Kaffee-Junkies:
... und für alle, die denken, dass es einen besseren Weg gibt, dies zu tun, ohne native Prototypen zu erweitern:
quelle
'Answer'.replace(/^./, v => v.toLowerCase())
Verwenden:
Es wird
"Ruby java"
an die Konsole ausgegeben .quelle
Wenn Sie underscore.js oder Lo-Dash verwenden , bietet die Bibliothek underscore.string Zeichenfolgenerweiterungen, einschließlich Großbuchstaben:
Beispiel:
quelle
_.capitalize("foo") === "Foo"
.humanize
. Es wandelt eine unterstrichene, kamelisierte oder dasherisierte Zeichenfolge in eine humanisierte um. Entfernt auch Anfangs- und End-Leerzeichen und das Postfix '_id'.Und dann:
Update Nov.2016 (ES6), nur zum Spaß:
dann
capitalize("hello") // Hello
quelle
const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();
.KURZESTE 3 Lösungen, 1 und 2 behandeln Fälle, wenn
s
Zeichenfolge ist""
,null
undundefined
:Code-Snippet anzeigen
quelle
Nur CSS
::first-letter
, gilt es für das erste Zeichen , dh im Falle einer Zeichenfolge%a
würde dieser Selektor für das erste Zeichen gelten%
und als solchesa
nicht großgeschrieben werden.: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:
Bemerkungen
parameters => function
ist sogenannte Pfeilfunktion .capitalizeFirstChar
stattcapitalizeFirstLetter
, 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).const
gibt uns die Möglichkeit,capitalizeFirstChar
als konstant zu deklarieren , was erwünscht ist, da Sie als Programmierer Ihre Absichten immer explizit angeben sollten.string.charAt(0)
undstring[0]
. Beachten Sie jedoch, dassstring[0]
diesundefined
für eine leere Zeichenfolge gilt. Daher sollte diese neu geschrieben werdenstring && string[0]
, was im Vergleich zur Alternative viel zu ausführlich ist.string.substring(1)
ist schneller alsstring.slice(1)
.Benchmark
quelle
Es gibt eine sehr einfache Möglichkeit, es durch Ersetzen zu implementieren . Für ECMAScript 6:
Ergebnis:
quelle
/^[a-z]/i
ist besser als die Verwendung,.
da die vorherige nicht versucht, andere Zeichen als Alphabete zu ersetzenIn CSS scheint es einfacher zu sein:
Dies stammt aus der CSS- Texttransformationseigenschaft (bei W3Schools ).
quelle
quelle
Ich habe in den vorhandenen Antworten auf Fragen im Zusammenhang mit
CodepunktenfürAstralebenen oder derInternationalisierung 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:
Einige Großbuchstaben liegen jedoch außerhalb des BMP (mehrsprachige Grundebene, Codepunkte U + 0 bis U + FFFF). Nehmen Sie zum Beispiel diesen Deseret-Text:
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: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.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 ****:
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:
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 gefundennavigator.languages
und die Sprache eines bestimmten DOM-Elements kann (normalerweise)Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HERE
in 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:
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 Zeicheneigenschaft
CWU
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: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.
quelle
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-letter
CSS 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-uppercase
und fügen Sie etwas wie das Folgende in Ihr CSS ein:Die alternative Option ist auch JavaScript. Das Beste ist also Folgendes:
und nenne es wie:
Wenn Sie es immer wieder verwenden möchten, hängen Sie es besser an den nativen Javascript-String an, also wie folgt:
und nenne es wie folgt:
quelle
Wenn Sie All-Caps-Text neu formatieren möchten, möchten Sie möglicherweise die anderen Beispiele als solche ändern:
Dadurch wird sichergestellt, dass der folgende Text geändert wird:
quelle
quelle
substr
/substring
etwas semantischer ist als dasslice
, 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;)Hier ist eine Funktion namens ucfirst () (kurz für "Großbuchstaben"):
Sie können eine Zeichenfolge groß schreiben, indem Sie ucfirst ("eine Zeichenfolge") aufrufen, z.
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.
quelle
substr()
das veraltet ist? Es ist noch nicht einmal drei Jahre später, geschweige denn 2009, als Sie diesen Kommentar abgegeben haben.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".substring
,substr
undslice
) sind zu viele, IMO. Ich benutzeslice
es immer, weil es negative Indizes unterstützt, nicht das verwirrende Arg-Swapping-Verhalten aufweist und seine APIslice
in anderen Sprachen ähnlich ist.Verwendungszweck:
Dies ist eine Textzeichenfolge => Dies ist eine Textzeichenfolge
quelle
return.this.toLocaleLowerCase().replace(
...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.quelle
Kasse dieser Lösung:
quelle
stringVal.replace(/^./, stringVal[0].toUpperCase());
stringVal[0]
wäreundefined
für leerstringVal
, und als solche würde der Versuch, auf Eigentum zuzugreifen.toUpperCase()
, einen Fehler auslösen.(Sie können es in eine Funktion einkapseln oder sogar zum String-Prototyp hinzufügen, wenn Sie es häufig verwenden.)
quelle
Die
ucfirst
Funktion funktioniert, wenn Sie es so machen.Danke JP für die Erklärung.
quelle
string[0].toUpperCase() + string.substring(1)
(string[0] || '').toUpperCase() + string.substring(1)
(string[0] || '')
könnte man einfachstring.charAt(0)
.Sie können es in einer Zeile wie folgt tun
quelle
Ich fand diese Pfeilfunktion am einfachsten. Ersetzen entspricht dem ersten Buchstaben (
\w
) Ihrer Zeichenfolge und konvertiert es in Großbuchstaben. Nichts schickeres nötig.quelle
/./
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