javascript - 字符串首字母大写 - 确保字符串的每个单词首字母都大写其余部分小写




如何在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

将字符串中所有单词的首字母大写:

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

我们可以用我最喜欢的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