如何在JavaScript中将字符串的首字母大写?

2020/09/13 23:01 · javascript ·  · 0评论

如何使字符串的第一个字母大写,但不更改其他任何字母的大小写?

例如:

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

基本解决方案是:

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

console.log(capitalizeFirstLetter('foo')); // Foo

修改了其他一些答案String.prototype(这个答案也曾经使用过),但是由于可维护性,我现在建议这样做(很难找出函数添加到的位置prototype,如果其他代码使用相同的名称/浏览器,可能会导致冲突。将来添加具有相同名称的本机函数)。

...然后,当您考虑国际化时,这个问题还有很多,正如这个令人惊讶的好答案(埋在下面)所示。

如果要使用Unicode代码点而不是代码单元(例如,在基本多语言平面之外处理Unicode字符),则可以利用String#[@iterator]与代码点一起使用的事实,并且可以使用toLocaleUpperCase正确的语言环境大写形式:

function capitalizeFirstLetter([ first, ...rest ], locale = navigator.language) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

console.log(capitalizeFirstLetter('foo')); // Foo
console.log(capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉")); // "𐐎𐐲𐑌𐐼𐐲𐑉" (correct!)
console.log(capitalizeFirstLetter("italya", 'tr')); // İtalya" (correct in Turkish Latin!)

有关更多国际化选项,请参见下面原始答案

这是一种更加面向对象的方法:

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

您可以像下面这样调用该函数:

"hello world".capitalize();

预期输出为:

"Hello world" 

在CSS中:

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

这是流行答案的简化版本,它通过将字符串视为数组来获得第一个字母:

function capitalize(s)
{
    return s[0].toUpperCase() + s.slice(1);
}

更新:

根据下面的评论,这在IE 7或更低版​​本中不起作用。

更新2:

为了避免出现undefined空字符串(请参见下面的@ njzk2的注释),您可以检查一个空字符串:

function capitalize(s)
{
    return s && s[0].toUpperCase() + s.slice(1);
}

如果您对发布的几种不同方法的性能感兴趣:

这是基于此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);
}

在此处输入图片说明

在另一种情况下,我需要将其首字母大写,将其余字母小写。以下情况使我更改了此功能:

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

这是2018 ECMAScript 6+解决方案

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

如果您已经(或正在考虑)使用lodash,则解决方案很简单:

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

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

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

查看他们的文档: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'

Vanilla js的第一个大写字母:

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

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

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

我在现有答案中没有看到与星体平面代码点或国际化有关的任何问题使用给定脚本,“大写”在每种语言中并不意味着同一件事。

最初,我看不到任何与星体平面代码点相关的问题的答案。一个,但是有点埋没了(我想是这样的!)


建议的大多数功能如下:

function capitalizeFirstLetter(str) {
  return str[0].toUpperCase() + str.slice(1);
}

但是,某些大小写的字符不在BMP(基本多语言平面,代码点U + 0至U + FFFF)之外。例如,使用以下Deseret文本:

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉"); // "𐐶𐐲𐑌𐐼𐐲𐑉"

这里的第一个字符不能大写,因为字符串的数组索引属性无法访问“字符”或代码点*。他们访问UTF-16代码单元。切片时也是如此—索引值指向代码单位。

碰巧UTF-16代码单元为1:1,USV代码点在两个范围内(包括U + 0至U + D7FF和U + E000至U + FFFF)。大多数情况下的字符都属于这两个范围,但不是全部。

从ES2015开始,处理此问题变得更加容易。String.prototype[@@iterator]产生与代码点**相对应的字符串。因此,例如,我们可以这样做:

function capitalizeFirstLetter([ first, ...rest ]) {
  return [ first.toUpperCase(), ...rest ].join('');
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

对于更长的字符串,这可能效率不高***-我们真的不需要迭代其余部分。我们可以String.prototype.codePointAt用来获取第一个(可能的)字母,但是我们仍然需要确定切片应从何处开始。避免迭代其余部分的一种方法是测试第一个代码点是否在BMP之外。如果不是,则切片从1开始,如果是,则切片从2开始。

function capitalizeFirstLetter(str) {
  const firstCP = str.codePointAt(0);
  const index = firstCP > 0xFFFF ? 2 : 1;

  return String.fromCodePoint(firstCP).toUpperCase() + str.slice(index);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

您可以使用按位数学,而不是在> 0xFFFF那里,但是用这种方式可能更容易理解,并且两者都可以实现相同的目的。

我们也可以在ES5及以下版本中通过在必要时进一步扩展该逻辑来使这项工作生效。ES5中没有用于处理代码点的内在方法,因此我们必须手动测试第一个代码单元是否为代理****:

function capitalizeFirstLetter(str) {
  var firstCodeUnit = str[0];

  if (firstCodeUnit < '\uD800' || firstCodeUnit > '\uDFFF') {
    return str[0].toUpperCase() + str.slice(1);
  }

  return str.slice(0, 2).toUpperCase() + str.slice(2);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

在开始时,我还提到了国际化的考虑。其中有些是对账户,因为它们需要的知识不仅是非常困难的东西正在使用的语言,但也可能需要在语言中的单词的具体知识。例如,爱尔兰语有向图“ mb”在单词的开头大写为“ mB”。另一个示例,德语eszett,从不以单词开头(afaik),但仍有助于说明问题。小写的eszett(“ß”)大写为“ SS”,但是“ SS”可以小写为“ß”或“ ss”-您需要带德语的带外知识才能知道哪种正确!

这类问题最著名的例子就是土耳其语。在土耳其语拉丁语中,i的大写形式为İ,而I的小写形式为ı,它们是两个不同的字母。幸运的是,我们确实可以解决这个问题:

function capitalizeFirstLetter([ first, ...rest ], locale) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

capitalizeFirstLetter("italy", "en") // "Italy"
capitalizeFirstLetter("italya", "tr") // "İtalya"

在浏览器中,用户最喜欢的语言标记由表示navigator.language,在中找到了按优先顺序排列的列表navigator.languages,并且可以(通常)Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HERE在多语言文档中获得给定的DOM元素的语言

在ES2018中引入的在RegExp中支持Unicode属性字符类的代理中,我们可以通过直接表达我们感兴趣的字符来进一步清理内容:

function capitalizeFirstLetter(str, locale=navigator.language) {
  return str.replace(/^\p{CWU}/u, char => char.toLocaleUpperCase(locale));
}

可以稍作调整,以同样好的精度处理字符串中的多个单词。CWUChanges_When_Uppercased字符属性匹配其中,那么,改变大写当所有代码点。我们可以尝试了这一点与titlecased有向图的人物,如荷兰ij例如:

capitalizeFirstLetter('ijsselmeer'); // "IJsselmeer"

在撰写本文时(2020年2月),Firefox / Spidermonkey尚未实现过去两年中引入的任何RegExp功能*****。您可以在Kangax兼容表中查看此功能的当前状态Babel能够使用对等效模式的属性引用来编译RegExp常量,而无需使用等效模式,但是请注意,生成的代码可能很大。


提出这个问题的人极有可能与Deseret的大写字母或国际化无关。但是,意识到这些问题是一件好事,因为即使目前不关心这些问题,您也很有可能最终会遇到这些问题。它们不是“边缘”情况,或更确切地说,它们不是按定义的边缘情况-在整个国家,大多数人还是会说土耳其语,将代码单元与代码点合并是一个相当常见的错误来源(尤其是与关于表情符号)。字符串和语言都非常复杂!


*从某种意义上说,UTF-16 / UCS2的代码单元也是Unicode代码点,例如从技术上讲U + D800是一个代码点,但这并不是它的“含义”……虽然很漂亮模糊。但是,替代品绝对不是USV(Unicode标量值)。

**尽管如果代理代码单元是“孤立的”(即,不是逻辑对的一部分),您仍然可以在这里获得代理。

*** 也许。我还没有测试。除非您确定大写是一个有意义的瓶颈,否则我可能不会大惊小怪-选择您认为最清晰易读的内容。

****这种功能可能希望同时测试第一个和第二个代码单元,而不仅仅是第一个,因为第一个单元很可能是孤立的代理。例如,输入“ \ uD800x”将按原样将X大写,这可能会或可能不会出现。

***** 如果您想直接关注进度,这是Bugzilla问题

我们可以得到一个我最喜欢的角色的第一个角色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 str = "ruby java";

console.log(str.charAt(0).toUpperCase() + str.substring(1));

它将输出"Ruby java"到控制台。

有一个非常简单的方法可以通过replace实现它对于ECMAScript 6:

'foo'.replace(/^./, str => str.toUpperCase())

结果:

'Foo'

最短的 3个解决方案,当sstring 为时处理1和2的情况""null以及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

如果您使用underscore.jsLo-Dash,则underscore.string库提供字符串扩展名,包括大写:

_.capitalize(string)将字符串的首字母转换为大写。

例:

_.capitalize("foo bar") == "Foo bar"
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

仅CSS

p::first-letter {
  text-transform: uppercase;
}
  • 尽管被调用了::first-letter,但它适用于第一个字符,即在使用string的情况下%a,此选择器将适用于大写字母%a因此不会大写。
  • 在IE9 +或IE5.5 +中,仅使用一个冒号(:first-letter支持旧式表示法

ES2015单缸

由于答案很多,但ES2015中没有一个答案可以有效解决原始问题,因此我提出了以下解决方案:

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

备注

  • parameters => function就是所谓的箭头功能
  • 我使用name 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个操作/秒±1.2%。
  • 在Google Chrome 57上使用JSBench.me创建

解决方案的比较

在CSS中似乎更容易:

<style type="text/css">
    p.capitalize {text-transform:capitalize;}
</style>
<p class="capitalize">This is some text.</p>

这来自CSS文本转换属性(位于W3Schools)。

var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1);

如果要重新格式化全部大写的文本,则可能需要修改其他示例,例如:

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

这将确保更改以下文本:

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

通常最好先使用CSS处理这类内容,通常,如果您可以使用CSS解决某些问题,请先解决该问题,然后尝试使用JavaScript解决问题,因此在这种情况下,请尝试:first-letter在CSS中使用并应用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'
capitalizeTxt('alireza');  // return 'Alireza'

如果您想一遍又一遍地重用它,最好将其附加到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'
'alireza'.capitalizeTxt();  // return 'Alireza'

这是一个称为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()将大写的字母大写并将其与字符串的其余部分通过调用str.substr (1)找到)连接起来

您可能会认为这将导致一个空字符串失败,实际上,在像C这样的语言中,您将不得不满足这一要求。但是,在JavaScript中,当您获取一个空字符串的子字符串时,您只会得到一个空字符串。

function capitalize(s) {
    // returns the first letter capitalized + the string from index 1 and out aka. the rest of the string
    return s[0].toUpperCase() + s.substr(1);
}


// examples
capitalize('this is a test');
=> 'This is a test'

capitalize('the Eiffel Tower');
=> 'The Eiffel Tower'

capitalize('/index.html');
=> '/index.html'
String.prototype.capitalize = function(){
    return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase();
    } );
};

用法:

capitalizedString = someString.capitalize();

这是一个文本字符串=>这是一个文本字符串

var str = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);

签出此解决方案:

var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // returns Master 
yourString.replace(/^[a-z]/, function(m){ return m.toUpperCase() });

(如果您经常使用它,则可以将其封装在一个函数中,甚至可以将其添加到String原型中。)

你可以像这样一行

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

ucfirst如果您这样做,功能将起作用。

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

感谢JP的声明。

yourString.replace(/\w/, c => c.toUpperCase())

我发现此箭头功能最简单。Replace将匹配\w字符串的第一个字母字符(),并将其转换为大写字母。不需要任何高级爱好者。

本文地址:http://javascript.askforanswer.com/ruhezaijavascriptzhongjiangzifuchuandeshouzimudaxie.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!