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 von capitalizeFirstLetter , 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) und string[0] . Beachten Sie jedoch, dass die string[0] für eine leere Zeichenfolge undefined wäre. undefined sollte sie in string && string[0] umgeschrieben werden, was im Vergleich zu der Alternative viel zu umfangreich 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 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 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.


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-letterin CSS und anwendentext-transform:capitalize;

Versuchen Sie also, eine Klasse dafür zu erstellen, damit Sie sie beispielsweise global verwenden können: .first-letter-uppercaseund 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);






letter