javascript首字大寫 - java字首大寫




如何在JavaScript中創建字符串大寫的第一個字母? (20)

如何將字符串的第一個字母設為大寫,但不更改任何其他字母的大小寫?

例如:

  • "this is a test" - > "This is a test"
  • "the Eiffel Tower" - > "The Eiffel Tower"
  • "/index.html" - > "/index.html"

僅限CSS

p::first-letter {
  text-transform: uppercase;
}
  • 儘管被稱為::first-letter ,但它適用於第一個字符 ,即在字符串%a情況下,此選擇器將應用於% ,因此不會大寫。
  • 在IE9 +或IE5.5 +中,只有一個冒號( :first-letter )支持傳統表示法。

ES2015單線

由於有很多答案,但在ES2015中沒有一個可以有效解決原始問題的答案,我想出了以下內容:

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

備註

  • parameters => function是所謂的箭頭函數
  • 我使用名稱為capitalizeFirstChar而不是capitalizeFirstLetter ,因為OP沒有要求代碼將整個字符串中的第一個字母大寫,而是第一個字母(當然,如果是字母)。
  • const使我們能夠將capitalizeFirstChar聲明為常量,這是期望的,因為作為程序員,你應該總是明確表明你的意圖。
  • 在我執行的基準測試中, string.charAt(0)string[0]之間沒有顯著差異。 但是請注意,對於空字符串, string[0]將是undefined的,因此應該將其重寫為string && string[0] ,與替代方法相比,這樣做過於冗長。
  • string.substring(1)string.slice(1)快。

基準

  • 此解決方案為4,956,962 ops / s±3.03%,
  • 最多投票的答案,4,577,946 ops / s±1.2%。
  • 在Google Chrome 57上使用JSBench.me創建。


如果您對發布的幾種不同方法的表現感興趣:

以下是基於此jsperf測試的最快方法(從最快到最慢排序)。

正如您所看到的,前兩種方法在性能方面基本相當,而改變String.prototype在性能方面是迄今為止最慢的。

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


這是2018年的ES6 +解決方案

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


你可以像這樣在一行中完成

string[0].toUpperCase() + string.substring(1)

在CSS中:

p:first-letter {
    text-transform:capitalize;
}

如果你這樣做, ucfirst函數可以工作。

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

感謝JP的批評。


如果您已經(或正在考慮)使用lodash ,解決方案很簡單:

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

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

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

查看他們的文檔: https://lodash.com/docs#capitalizehttps://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'

第一個大寫的Vanilla js:

function upperCaseFirst(str){
    return str.charAt(0).toUpperCase() + str.substring(1);
}

如果您想重新格式化全文字幕文本,您可能希望修改其他示例:

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

這將確保更改以下文本:

TEST => Test
This Is A TeST => This is a test

對於另一個案例,我需要它來大寫第一個字母和小寫其餘的。 以下情況讓我改變了這個功能:

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

我們可以用我最喜歡的RegExp獲得第一個角色,看起來像一個可愛的笑臉: /^./

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

對於所有咖啡愛好者:

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

......並且對於那些認為有更好的方法可以做到這一點而不擴展原生原型的所有人:

var capitalize = function (input) {
  return input.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

檢查此解決方案:

var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // returns Master 

這是一個名為ucfirst()的函數 “大寫首字母”的縮寫):

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

您可以通過調用ucfirst(“some string”)來大寫字符串 - 例如,

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

它的工作原理是將字符串分成兩部分。 在第一行它拉出firstLetter然後在第二行它通過調用firstLetter.toUpperCase()來大寫firstLetter並將它與字符串的其餘部分連接起來,這是通過調用str.substr(1)找到的

您可能會認為這對於一個空字符串會失敗,實際上在像C這樣的語言中你必須滿足這個要求。 但是在JavaScript中,當您獲取空字符串的子字符串時,您只需返回一個空字符串。


CoffeeScript,為字符串添加原型:

String::capitalize = ->
  @substr(0, 1).toUpperCase() + @substr(1)

用法是:

"woobie".capitalize()

產量:

"Woobie"

首先使用CSS處理這些類型的東西總是更好,一般來說,如果你可以使用CSS解決問題,先去做,然後嘗試JavaScript來解決你的問題,所以在這種情況下嘗試使用:first-letterCSS併申請text-transform:capitalize;

因此,嘗試為此創建類,以便您可以全局使用它,例如:.first-letter-uppercase並在CSS中添加如下內容:

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

另外一個選擇是JavaScript,所以最好是這樣的:

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

並稱之為:

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

如果你想一遍又一遍地重複使用它,最好將它附加到javascript原生String,如下所示:

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

並將其命名如下:

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

用法:

capitalizedString = someString.capitalize();

這是一個文本字符串=>這是一個文本字符串


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
}

然後:

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

更新2016年11月(ES6),只是為了樂趣:

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

然後capitalize("hello") // Hello


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

其他一些答案修改了String.prototype (這個答案也是如此),但由於可維護性,我現在建議不要這樣做(很難找到函數添​​加到prototype ,如果其他代碼使用相同的代碼,可能會導致衝突) name /瀏覽器將來添加具有相同名稱的本機函數。


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