ersten - javascript erster buchstabe groß
Wie erstelle ich den ersten Buchstaben einer Zeichenfolge in JavaScript in Großbuchstaben? (20)
Nur CSS
p::first-letter {
text-transform: uppercase;
}
- Obwohl
::first-letter
aufgerufen wird, gilt es für das erste Zeichen , dh im Fall der Zeichenfolge%a
würde dieser Selektor für%
gelten und als solches nicht aktiviert werden. - In IE9 + oder IE5.5 + wird es in der älteren Notation mit nur einem Doppelpunkt (
:first-letter
) unterstützt.
ES2015 Einliner
Da es zahlreiche Antworten gibt, aber keine in ES2015, die das ursprüngliche Problem effizient lösen würde, kam ich zu folgendem Ergebnis:
const capitalizeFirstChar = str => str.charAt(0).toUpperCase() + str.substring(1);
Bemerkungen
-
parameters => function
ist die sogenannte Pfeilfunktion . - Ich habe den Namen
capitalizeFirstChar
anstelle voncapitalizeFirstLetter
, weil OP nicht nach Code gefragt hat, der den ersten Buchstaben der gesamten Zeichenfolge großschreibt, sondern das allererste Zeichen (wenn es sich natürlich um Buchstaben handelt). -
const
gibt uns die Möglichkeit,capitalizeFirstChar
als konstant zu deklarieren.capitalizeFirstChar
ist erwünscht, da Sie als Programmierer immer Ihre Absichten explizit angeben sollten. - In dem von mir durchgeführten Benchmark gab es keinen signifikanten Unterschied zwischen
string.charAt(0)
undstring[0]
. Beachten Sie jedoch, dass diestring[0]
für eine leere Zeichenfolgeundefined
wäre.undefined
sollte sie instring && string[0]
umgeschrieben werden, was im Vergleich zu der Alternative viel zu umfangreich ist. -
string.substring(1)
ist schneller alsstring.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 meisten gewählte Antwort.
- Erstellt mit JSBench.me in Google Chrome 57.
Wie erstelle ich den ersten Buchstaben einer Zeichenfolge in Großbuchstaben, aber die Groß- / Kleinschreibung der anderen Buchstaben nicht ändern?
Zum Beispiel:
-
"this is a test"
->"This is a test"
-
"the Eiffel Tower"
->"The Eiffel Tower"
-
"/index.html"
->"/index.html"
Wenn Sie an der Leistung einiger verschiedener Methoden interessiert sind:
Hier sind die schnellsten Methoden, die auf diesem jsperf-Test basieren (geordnet von schnellsten zu langsamsten).
Wie Sie sehen, sind die ersten beiden Methoden im Wesentlichen in Bezug auf die Leistung vergleichbar, während die Änderung des String.prototype
in Bezug auf die Leistung bei weitem die langsamste 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);
}
Für einen anderen Fall brauche ich es, um den ersten Buchstaben groß zu schreiben und den Rest klein zu schreiben. In den folgenden Fällen habe ich diese Funktion geändert:
//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();
Hier ist eine Funktion namens ucfirst () (kurz für "Großbuchstabe"):
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 ("einige Zeichenfolge") aufrufen. Beispiel:
ucfirst("this is a test") --> "This is a test"
Es funktioniert, indem die Schnur in zwei Teile geteilt wird. In der ersten Zeile wird firstLetter herausgezogen und in der zweiten Zeile wird firstLetter mit dem Aufruf von firstLetter.toUpperCase () großgeschrieben und mit dem Rest der Zeichenfolge verbunden, die mit dem Aufruf von str.substr (1) gefunden wird .
Sie denken vielleicht, 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 einen Teilstring einer leeren Zeichenfolge verwenden, erhalten Sie lediglich eine leere Zeichenfolge zurück.
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 ist von CSS text-transform Property (bei W3Schools ).
In CSS:
p:first-letter {
text-transform:capitalize;
}
Wenn Sie underscore.js oder Lo-Dash , enthält die Bibliothek underscore.string Zeichenfolgenerweiterungen, einschließlich Großschreibung:
_.capitalize (string) Konvertiert den ersten Buchstaben der Zeichenfolge in Großbuchstaben.
Beispiel:
_.capitalize("foo bar") == "Foo bar"
Wenn Sie lodash
bereits verwenden (oder in Erwägung ziehen), ist die Lösung einfach:
_.upperFirst('fred');
// => 'Fred'
_.upperFirst('FRED');
// => 'FRED'
_.capitalize('fred') //=> 'Fred'
Die entsprechenden Dokumente finden Sie unter 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'
Vanillejs für den ersten Großbuchstaben:
function upperCaseFirst(str){
return str.charAt(0).toUpperCase() + str.substring(1);
}
Wir könnten den ersten Charakter mit einem meiner Lieblings- RegExp
, der wie ein süßer Smiley aussieht: /^./
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 der Meinung sind, dass es einen besseren Weg gibt, ohne native Prototypen zu erweitern:
var capitalize = function (input) {
return input.replace(/^./, function (match) {
return match.toUpperCase();
});
};
Überprüfen Sie diese Lösung:
var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // returns Master
Hier sind die besten Lösungen:
Erste Lösung in CSS:
p {
text-transform: capitalize;
}
Zweite Lösung :
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
Sie können es auch dem String.prototype
hinzufügen, um es mit anderen Methoden zu String.prototype
:
String.prototype.capitalizeFirstLetter = function() {
return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();
}
und benutze es so:
'string'.capitalizeFirstLetter() // String
Dritte Lösung :
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).toLowerCase();
}
return pieces.join(" ");
}
Sie können es in einer Zeile so machen
string[0].toUpperCase() + string.substring(1)
Die ucfirst
Funktion 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.
Es ist immer besser , diese Art von Stoffen umgehen mit CSS ersten , im Allgemeinen, wenn Sie etwas mit CSS lösen, gehen Sie für das erste, dann JavaScript versuchen , Ihre Probleme zu lösen, so dass in diesem Fall versuchen Sie es mit :first-letter
in CSS und anwendentext-transform:capitalize;
Versuchen Sie also, eine Klasse dafür zu erstellen, damit Sie sie beispielsweise global verwenden können: .first-letter-uppercase
und fügen Sie etwas wie folgt in Ihr CSS ein:
.first-letter-uppercase:first-letter {
text-transform:capitalize;
}
Die alternative Option ist auch JavaScript. Am besten wird es so aussehen:
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'
Wenn Sie es immer wieder verwenden möchten, sollten Sie es an den nativen JavaScript-String anhängen.
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'
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
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 November 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
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
Einige andere Antworten modifizieren String.prototype
(diese Antwort war früher auch der String.prototype
), aber ich würde jetzt aus String.prototype
davon abraten. Es ist schwierig zu erfahren, wo die Funktion zum prototype
hinzugefügt wird. Dies kann zu Konflikten führen, wenn anderer Code denselben Code verwendet Name / a Browser fügt zukünftig eine native Funktion mit demselben Namen hinzu).
var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1);
var str = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);
var string = "hello world";
string = string.charAt(0).toUpperCase() + string.slice(1);
alert(string);