5172 Stimmen

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

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"

70voto

Przemek Punkte 3603

Nur CSS

Wenn die Transformation nur für die Anzeige auf einer Webseite benötigt wird:

p::first-letter {
  text-transform: uppercase;
}
  • Trotz der Bezeichnung " ::first-letter ", gilt sie für die erste Zeichen d.h. im Falle der Zeichenkette %a würde dieser Selektor gelten für % und als solche a würde nicht kapitalisiert werden.
  • In IE9+ oder IE5.5+ wird es in der alten Schreibweise mit nur einem Doppelpunkt ( :first-letter ).

ES2015 Einzeiler

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

Bemerkungen

  • Bei dem von mir durchgeführten Benchmark gab es keinen signifikanten Unterschied zwischen string.charAt(0) y string[0] . Beachten Sie jedoch, dass string[0] wäre undefined für eine leere Zeichenkette, so dass die Funktion umgeschrieben werden müsste, um " string && string[0] ", was im Vergleich zur Alternative viel zu langatmig ist.
  • string.substring(1) ist schneller als string.slice(1) .

Benchmark zwischen substring() y slice()

Heutzutage ist der Unterschied eher geringfügig ( den Test selbst durchführen ):

  • 21.580.613,15 ops/s ±1,6% für substring() ,
  • 21.096.394,34 ops/s ±1,8% ( 2,24% langsamer ) für slice() .

Solutions' comparison

66voto

Dan Punkte 777

Großschreibung des ersten Buchstabens aller Wörter in einer Zeichenkette:

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(" ");
}

63voto

Alireza Punkte 92209

Es ist immer besser, diese Art von Dingen mit CSS zuerst Im Allgemeinen gilt: Wenn Sie etwas mit CSS lösen können, sollten Sie das zuerst tun, und dann versuchen, Ihre Probleme mit JavaScript zu lösen, in diesem Fall also mit :first-letter in CSS und wenden Sie text-transform:capitalize;

Versuchen Sie also, eine Klasse dafür zu erstellen, damit Sie sie z. B. global verwenden können: .first-letter-uppercase und fügen Sie etwas wie unten in Ihr CSS ein:

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

Auch die alternative Option ist JavaScript, so dass die beste gonna etwas wie dieses sein:

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

und nennen Sie 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'
capitalizeTxt('dezfoolian');  // return 'Dezfoolian'

Wenn Sie es immer wieder verwenden möchten, ist es besser, es zu Javascript nativen String, so etwas wie unten anhängen:

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

und rufen Sie es wie folgt auf:

'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'

56voto

Abdennour TOUMI Punkte 75271
String.prototype.capitalize = function(allWords) {
   return (allWords) ? // If all words
      this.split(' ').map(word => word.capitalize()).join(' ') : // Break down the phrase to words and then recursive
                                                                 // calls until capitalizing all words
      this.charAt(0).toUpperCase() + this.slice(1); // If allWords is undefined, capitalize only the first word,
                                                    // meaning the first character 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 für 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 character which is capitalized by
                                                        // the `toUpperCase()` method
 ).join('')                                             // Return back to string

dann capitalize("hello") // Hello

51voto

Kamil Kiełczewski Punkte 69048

KÜRZESTE 3 Lösungen, 1 und 2 behandeln Fälle, in denen s Zeichenfolge ist "" , null y 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

let s='foo bar';

console.log( s&&s[0].toUpperCase()+s.slice(1) );

console.log( s&&s.replace(/./,s[0].toUpperCase()) );

console.log( 'foo bar'.replace(/./,x=>x.toUpperCase()) );

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X