如何在JavaScript中创建字符串大写的第一个字母?

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

例如:

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

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

  • 不,因为OP给出了这个例子:`艾菲尔铁塔 - >艾菲尔铁塔`.此外,该函数被称为"capitaliseFirstLetter"而不是"capitaliseFirstLetterAndLowerCaseAllTheOthers".
  • 难道我们也不应该给LaseCase切片(1)?
  • 没有人关心OOP的重要规则? - __Never编辑你不拥有的对象?__.顺便说一句,这个单行看起来更优雅:`string [0] .toUpperCase()+ string.substring(1)`
  • substring在更多的浏览器中被理解而不是substr
  • 添加到karim79 - 它可能是一种矫枉过正的功能,因为javascript将对变量做同样的事情,而不需要函数包装.我想使用一个函数会更清楚,但是它原生,否则为什么要用函数包装器复杂化呢?
  • @ dr.dimitru:您的解决方案无法使用空字符串作为输入.试试这个:`string && string [0] .toUpperCase()+ string.slice(1)`.[小提琴](https://jsfiddle.net/dan_cron/dxe7c57t/)
  • 如果0处的字符是空格怎么办?
  • 不要修改本机对象的原型.它会咬你的屁股,就像它对我一样.
  • @ElAbogato这不是OP想要的行为。`HELLO` _should_输出`HELLO`,而不是`Hello`。

更面向对象的方法:

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

然后:

"hello world".capitalize();
  • @rxgx - "不要延伸"的boogeyman现在开始消亡(感谢上帝),人们正在从jSand中脱颖而出,并意识到它只是一种语言功能.仅仅因为Prototype.js在短时间内扩展了Object本身,并不意味着扩展Natives是坏事.如果您正在为未知的消费者编写代码(如随机网站上的分析脚本),则不应该这样做,但除此之外没关系.
  • 在这个后Prototype.js世界中,不建议更改或扩展本机对象.
  • @csuwldcat如果您使用的另一个库在您不知情的情况下添加了自己的大写,该怎么办?无论Prototype.js是否做到,扩展原型都是不好的形式.使用ES6,内在函数可以让你吃蛋糕也可以吃.我认为你可能会混淆"boogeyman"因为人们创造符合ECMASCRIPT规范的垫片而死亡.这些填充程序非常好,因为添加填充程序的另一个库将以相同的方式实现它.但是,应该避免添加自己的非规范内在函数.
  • 扩展本地人是非常糟糕的做法.即使你说"哦,我永远不会将此代码用于其他任何东西",你(或其他人)可能会.然后他们会花三天时间试图找出一些奇怪的数学错误,因为有人扩展了Number.money()来处理与你的其他库略有不同的货币.说真的,我已经看到这种情况发生在一家大公司,并且不值得任何人调试找出一个与原生原型混淆的库.
  • Polluting prototypes is not a good idea.
  • 我喜欢这个解决方案,因为它就像Ruby,Ruby很甜!:)我小写字符串的所有其他字母,以便它像Ruby一样工作:`return this.charAt(0).toUpperCase()+ this.substring(1).toLowerCase();`
  • @NielsLucas 足够公平。它有可能破坏 JS 的未来添加。如果它是只有您会使用的代码,那么还不错 - 您只需更新代码并继续。这里真正的问题是当您开始使用这样的代码发布库时:您的代码使用您的代码修改每个库的内置行为。结果是,如果你和另一个库作者都用你自己的实现覆盖了相同的内置函数,你会在另一个库的代码(或最后加载的代码)中创建错误,让用户调试不可复制的错误报告。
  • `"string".charAt(0)`实际上比``string'[0]`慢一点.编辑:@MathiasBynens指出我的解决方案在IE中不能一致地工作.因此,我认为`.charAt(0)`是最好的方法.
  • 有一个边缘情况,我不得不在大写字符串上使用它.我修改了一下.`return this.charAt(0).toUpperCase()+ this.slice(1).toLowerCase();`

在CSS中:

p:first-letter {
text-transform:capitalize;
}
  • $( '#mystring_id')文本(字符串)的.css( '文本转换', '利用').
  • OP正在寻求JS解决方案.
  • 大约80%的观众来到这个问题,这将是最好的答案.不是_question_的答案,而是_problem_的答案.
  • 此外,这仅影响字符串的显示 - 而不是实际值.如果它是一种形式,例如,该值仍将按原样提交.
  • 这个答案让我意识到CSS解决方案确实更适合我的工作.@dudewad:答案可能应该是免责声明这不是JS解决方案,但根据需要可能更合适.
  • 这不适用于没有DOM/CSS渲染的javascript上下文(如Node.js).它真的回答了这样的问题:"我如何将第一个字母呈现为Web浏览器中的大写字母,同时保持原始javascript字符串不变?"

以下是流行答案的缩短版本,通过将字符串视为数组来获取第一个字母:

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);
}
  • 谁在乎,IE7市场不到5%!那些可能是你的gremma和grempa的旧机器.我说短代码FTW!
  • 这在IE <8中不起作用,因为那些浏览器不支持字符串索引.IE8本身支持它,但仅适用于字符串文字 - 不适用于字符串对象.
  • @vsync我的意思是,根据您的用户人口统计数据,有时候(虽然我们越过2014年及以后感激越来越少),支持像IE7这样的老浏览器是有利可图的......
  • @ njzk2处理空字符串,您可以更新为:`return s &amp;&amp; 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);
}

  • 注意,用`.substr(1)`替换`.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();
  • 我同意你的观点,但我可以看到很多人在这里结束了这个答案所做的事情.
  • @TomHart这正是为什么它不是问题的解决方案.它应该是评论或其他问题和答案
  • @CarlosMuñoz如果你读了开头句,他说这是针对不同的案例.

这是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
  • `.slice()`慢于`.substring()`,`str [0]`对于一个空字符串将是'undefined`并使用模板文字加入这两个部分引入这里8个字符,而`+`只介绍3.
  • 我的回答Prz的目的是展示新的ES6支持的功能,特别是其他帖子中没有提到的模板文字.StackOverflow的想法是给搜索者"选项".他们可以采用本答案中描述的模板文字的概念,并将其与Substring v.Slice等微速增强相结合,如果他们的应用程序需要额外节省的毫秒数.我的回答也不包括任何单元测试,这表明你不应该直接复制StackOverflow的答案.我假设开发人员会接受我的回答并进行调整.

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

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 capitaliseFirstLetters(s){return s.split("").map(function(w){return w.charAt(0).toUpperCase()+ w.substr(1)}).join ("")}如果没有放入函数,可以是一个很好的单行.
  • 我知道我做到了 我要添加一件事,以防整个字符串以大写字母开头:Pieces [i] = j + Pieces [i] .substr(1).toLowerCase();

var string = "hello world";
string = string.charAt(0).toUpperCase() + string.slice(1);
alert(string);

如果您已经(或正在考虑)使用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);
}
  • 我认为首选应该是vanilla Js,因为大多数人不会只下载整个框架来大写字符串.
  • 当然,但大多数人可能已经装好了lodash.
  • 在我迄今为止的所有项目中,我从未使用过lodash.不要忘记谷歌上的大多数人都会在这个页面上结束,并且列出一个框架作为替代方案很好,但不是主要答案.
  • 由于其他答案使用vanilla js,很高兴得到这样的答案,因为我们很多人都使用lodash/underscore.

我们可以用我最喜欢的第一个角色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();
});
};
  • 有一种更好的方法可以在不修改 String 原型的情况下执行此操作。
  • @ davidkennedy85当然可以!但这是简单的方法,而不是*最好的方式... 😉

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

  • 我认为这是一个糟糕的解决方案有两个原因:修改原语的原型是一个坏主意.如果规范发生变化并且他们决定选择"大写"作为新的原型属性名称,那么您将破坏核心语言功能.此外,选择的方法名称很差.乍一看,我认为这将使整个字符串大写.使用更具描述性的名称,如PHP的ucFirst或类似的东西可能是一个更好的主意.

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

例:

_.capitalize("foo bar") == "Foo bar"
  • 自版本[3.0.0](https://github.com/lodash/lodash/releases/tag/3.0.0)起,Lo-Dash默认使用此字符串方法.就像在这个答案中描述的那样:`_.capitalize("foo")==="Foo"`.
  • 从版本 4* 开始,Lodash 也每隔一个字母小写(),小心!

仅限CSS

p::first-letter {
text-transform: uppercase;
}
  • 尽管被调用::first-letter,但它适用于第一个字符,即在字符串的情况下%a,此选择器将适用于%并且因此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创建.
  • 您实际上不想在 ES6 中使用加号 (+) 作为连接方法。你会想要使用模板文字:https://eslint.org/docs/rules/prefer-template

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

在CSS中似乎更容易:

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

这是来自CSS text-transform Property(在W3Schools).

  • 这个答案,尽管有一些荒谬的赞成,但这是错误的,因为它将把每个*字的第一个字母大写.@Ryan,如果你删除它,你将获得[纪律徽章](http://stackoverflow.com/badges/37/disciplined).**请这样做.**
  • @Simon没有声明字符串必须作为HTML文档的一部分输出 - 如果是,CSS只会被使用.
  • Dinesh不正确.他说*字符串的第一个字符*.
  • 同意@DanDascalescu - Ryan的回答是完全错误的.
  • 亚当,是的,但我猜想95%以上的Javascript都与HTML和CSS一起使用.不幸的是,"大写"语句实际上是**每个单词**的大写字母,所以你仍然需要JS只大写字符串的第一个字母.
  • 它现在是javascript:$('.capitalize').css('text-transform','capitalize')
  • 要使第一个字母大写,你可以使用第一个字母选择器:p.capitalize:first-letter {text-transform:capitalize;}显然Safari正在努力解决这个问题,但是没有调查过.
  • 确实,问题是要求JavaScript而且只是字符串的第一个字母,但问题的提问者并不是唯一一个寻找答案的人.对于很多人来说,它显然是一个很好的答案,从而产生了赞成.我当然不认为它应该被删除.
  • 我想,这个答案是错误的,但当我搜索到类似问题的答案时,我找到了这个答案,它完全符合我的问题.那谢谢啦.

首先使用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'
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'

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

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

这将确保更改以下文本:

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

var str = "ruby java";
console.log(str.charAt(0).toUpperCase() + str.substring(1));

它会回来 "Ruby java"

http://jsfiddle.net/amitpandya/908c8e2v/

结果链接在jsfiddle中


有一种非常简单的方法可以通过替换来实现它.对于ES6:

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

结果:

'Foo'

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'

SHORTEST 3解决方案,1和2处理s字符串时的情况"",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

对于s ='foo bar',我们得到

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

这是一个名为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中,当您获取空字符串的子字符串时,您只需返回一个空字符串.

  • @ 999:在哪里说`substr()`已被弃用?[不是](http://code.google.com/p/closure-compiler/issues/detail?id=285),即使是现在,三年之后,更不用说在2009年发表此评论时.
  • 使用String.substring()或String.slice()...不要使用substr() - 它已被弃用.
  • IMO拥有3个执行相同操作的方法(“ substring”,“ substr”和“ slice”)太多了。我总是使用`slice`,因为它支持负索引,它没有令人困惑的arg交换行为,并且它的API与其他语言中的`slice`类似。

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

仅仅因为这真的是一个单行我才会包括这个答案。它是一个基于ES6的内插字符串单行。

let setStringName = 'the Eiffel Tower';
setStringName = `${setStringName[0].toUpperCase()}${setStringName.substring(1)}`;

检查此解决方案:

var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // returns Master
  • 这应该是公认的答案.主要解决方案不应使用像下划线这样的框架.
  • 保存一些键击;)`stringVal.replace(/^ ./,stringVal [0] .toUpperCase());`
  • 不应该在不必要的地方使用正则表达式。它非常低效,也不会使代码更加简洁。此外,对于空的“stringVal”,“stringVal[0]”将是“undefined”,因此尝试访问属性“.toUpperCase()”将引发错误。

yourString.replace(/^[a-z]/, function(m){ return m.toUpperCase() });

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

  • 即使这有相当多的投票,这是迄今为止发布的最慢的解决方案.我用这篇文章中最流行的答案加快了速度,这里:http://forwebonly.com/capitalize-the-first-letter-of-a-string-in-javascript-the-fast-way /

ucfirst如果你这样做,该功能有效.

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

感谢JP的批评.

  • 一个班轮:`string [0] .toUpperCase()+ string.substring(1)`
  • 功能很好的名字!它的名称与PHP等价物相同.实际上有一个用JS编写的整个PHP函数库; 它被称为PHP.js,可在http:// http://phpjs.org/上找到

你可以像这样在一行中完成

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

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

我发现这个箭头功能最简单.替换匹配w字符串的第一个字母字符()并将其转换为大写.没有什么比这更好的了.

  • 这应该是公认的答案,而这几乎是最后一个,因为 SO 一直在奖励过时的问题。顺便说一句,最好使用`/./` 有两个原因:`/w/` 会跳过所有以前的非字母字符(所以@@abc 会变成@@Abc),然后它不会在not-拉丁字符

一种功能性方法

const capitalize = ([s, ...tring]) =>
[s.toUpperCase(), ...tring]
.join('');

那你可以

const titleCase = str =>
str
.split(' ')
.map(capitalize)
.join(' ')
  • 不要忘记toLowerCase()这个词的其余部分.将所有大写字母传递给当前的解决方案将使其保持全部大写.

每个字符串的第一个字符都大写。

function capitalize(word){
return word[0].toUpperCase() + word.slice(1).toLowerCase();
}
console.log(capitalize("john")); //John
console.log(capitalize("BRAVO")); //Bravo
console.log(capitalize("BLAne")); //Blane

在CoffeeScript中,为字符串添加原型:

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

用法是:

"woobie".capitalize()

产量:

"Woobie"
  • @Cobby - 这是一个coffeescript的答案.
  • 这是一个JavaScript问题.
  • 让记录声明:`CoffeeScript是一种编译成JavaScript的小语言.此外,`CoffeeScript的黄金法则是:"它只是JavaScript.""我想如果有人真正理解这两个句子,你就会明白为什么我包括这个答案.希望这能为每个人解决问题.资料来源:http://coffeescript.org/
  • Coffeescript是一种预处理器语言,而不是库...用于此的库将很愚蠢

function capitalize(string) {
return string.replace(/^./, Function.call.bind("".toUpperCase));
}
  • @henhen否,正则表达式字符'^`在开始时声明位置。然后`.`匹配一个字符

发布@ salim的答案编辑,包括区域设置字母转换.

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

我没有在与星界码点或国际化有关的问题的现有答案中看到任何提及."大写"在使用给定脚本的每种语言中并不意味着相同.

最初,我没有看到任何解决与星界平面码点相关的问题的答案.有一个,但它有点埋没(就像这个,我猜!)


大多数提议的函数看起来像这样:

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

但是,一些外壳字符不属于BMP(基本多语言平面,代码点U + 0到U + FFFF).例如,拿这个Deseret文本:

capitalizeFirstLetter(""); // ""

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

碰巧是UTF-16代码单元是两个范围内的代码点的代码点的1:1,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("") // ""

如果需要,我们还可以在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从来没有开始一个字(据我所知),这意味着在德国的"SS" lowercasing需要更多的知识(也可能是"ss"或它可能是"ß",取决于单词).

这个问题最着名的例子可能是土耳其语.在土耳其语拉丁语中,i的大写形式是İ,而I的小写形式是ı - 它们是两个不同的字母.幸运的是,我们确实有办法解释这个问题:

function capitalizeFirstLetter([ first, ...rest ], locale) {
return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}
capitalizeFirstLetter("italya", "en") // "Italya"
capitalizeFirstLetter("italya", "tr") // "?talya"

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


很可能,提出这个问题的人不会关注Deseret的资本化或国际化.但是要注意这些问题是件好事,因为即使他们现在不担心,你也很有可能会遇到这些问题.他们不是"边缘"的情况下,或者说,他们不是通过清晰的边缘情况-有一个全国大多数人说土耳其语,反正和混为一谈代码单位代码点是错误的一个相当普遍的来源(尤其是关于表情符号).字符串和语言都非常复杂!


*或代理代码单元,如果是孤立的

**也许.我没有测试过.除非你已经确定大写是一个有意义的瓶颈,否则我可能不会出汗 - 选择你认为最清晰可读的东西.

***这样的函数可能希望测试第一和第二代码单元而不是第一代码单元,因为第一单元可能是孤立的代理.例如,输入" uD800x"将按原样大写X,这可能是也可能不是预期的.


已经有这么多好的答案,但您也可以使用简单的 CSS 转换:

text-transform: capitalize;
text-transform: capitalize;
div.c {
text-transform: capitalize;
}
  • no, it only capitalize ist letter of each word in a sentence
    https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-transform

// Uppercase first letter
function ucfirst(field) {
field.value = field.value.substr(0, 1).toUpperCase() + field.value.substr(1);
}

用法:

<input type="text" onKeyup="ucfirst(this)" />
  • 没有对输入字段的引用,也没有事件处理请求的要求。除此之外,`field.value`可以通过增加可读性来缩短。

一种可能的方案:

function ConvertFirstCharacterToUpperCase(text) {
return text.substr(0, 1).toUpperCase() + text.substr(1);
}

用这个:

 alert(ConvertFirstCharacterToUpperCase("this is string"));

这是JS Fiddle的工作


这是我的版本,我认为它也很容易理解和优雅.

var str = "foo bar baz";
// capitalize
str.split(' ')
.map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
.join(' ')
// returns "Foo Bar Baz"
// capitalize first letter
str.charAt(0).toUpperCase() + str.slice(1)
// returns "Foo bar baz"

/*
* As terse as possible, assuming you're using ES version 6+
*/
var upLetter1=s=>s.replace(/./,m=>m.toUpperCase());
console.log(upLetter1("the quick brown fox jumped over the lazy dog."));
//\ The quick brown fox jumped over the lazy dog. //\

使用 JS替换字符串方法和带有单词边界的正则表达式似乎很简单。

大写第一个单词的第一个字符:“埃菲尔铁塔”-->“埃菲尔铁塔”

str.replace(/bw/, v => v.toUpperCase())

将所有单词的第一个字符大写:"the eiffel Tower" --> "The Eiffel Tower"

str.replace(/bw/g, v => v.toUpperCase())

使用箭头函数:

const capitalize = string => string[0].toUpperCase() + string.slice(1)

CoffeeScript的

ucfirst = (str) -> str.charAt(0).toUpperCase() + str.slice(1)

作为String原型方法:

String::capitalize = -> @charAt(0).toUpperCase() + @slice(1)
  • 愚蠢的问题,但是如何将其添加到coffeescript的String原型中?

或者你可以使用Sugar.js capitalize()

例:

'hello'.capitalize()           -> 'Hello'
'hello kitty'.capitalize()     -> 'Hello kitty'
'hello kitty'.capitalize(true) -> 'Hello Kitty'

使用原型

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

或使用功能

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

这个解决方案可能是新的,可能是最简单的.

function firstUpperCase(input)
{
return input[0].toUpperCase()+input.substr(1);
}
console.log(firstUpperCase("capitalize first letter"));

Unicode 和语言环境感知

使用当前语言功能:

function capitalize([firstLetter, ...rest]) {
return [firstLetter.toLocaleUpperCase(), ...rest].join('');
}
console.log(capitalize('foo bar'));
console.log(capitalize('???'))
console.log(capitalize('??'));
// Title Case
console.log(
'Title Case:',
'foo bar'
.split(/s+/)
.map(capitalize)
.join(' '),
);

我们接受一个解构的字符串作为唯一的参数[firstLetter, ...rest],将第一个字符分配给变量,firstLetter并为...rest绑定到rest变量的其余字符 ( )获取一个数组。例如,对于字符串,lorem ipsum它应该如下所示:

capitalize('lorem ipsum');
// firstLetter = 'l'
// rest = ['o', 'r', 'e', 'm', ' ', 'i', 'p', 's', 'u', 'm'];

现在我们需要做的就是firstLetter.toLocaleUpperCase()rest数组中添加第一个字母的大写版本——使用展开运算符——并使用扩展运算符将结果数组连接成一个字符串.join('')


这是我尝试制作一个通用函数,它只能使第一个字母或每个单词的第一个字母大写,包括用短划线分隔的单词(就像法语中的一些名字一样).

默认情况下,该函数仅使首字母大写,而其余部分保持不变.

参数:

lc:true将小写的其余部分全部小写
:true以将每个单词大写

if (typeof String.prototype.capitalize !== 'function') {
String.prototype.capitalize = function(lc, all) {
if (all) {
return this.split( " " ).map( function(currentValue, index, array ) {
return currentValue.capitalize( lc );
}, this).join(" ").split("-").map(function(currentValue, index, array) {
return currentValue.capitalize(false);
}, this).join("-");
}
else {
return lc ? this.charAt(0).toUpperCase() + this.slice(1 ).toLowerCase() : this.charAt(0).toUpperCase() + this.slice(1);
}
}
}

a.slice(0,1).toUpperCase()+a.slice(1)

let a = 'hello',
fix = a.slice(0,1).toUpperCase()+a.slice(1)
console.log(fix)

有多种方法可以尝试以下方法

var lower = 'the Eiffel Tower';
var upper = lower.charAt(0).toUpperCase() + lower.substr(1);

如果您对正则表达式感到满意,那么您可以这样做:

var upper = lower.replace(/^w/, function (chr) {
return chr.toUpperCase();
});

您甚至可以通过使用更现代的语法更进一步:

const upper = lower.replace(/^w/, c => c.toUpperCase());
const upper = lower.replace(/^w/, c => c.toUpperCase());

此外,这将照顾示例中提到的负面情况,例如以特殊字符开头的单词!@#$%^&*()}{{[];':",.<>/?.


优雅的

const capitalize = ([firstChar, ...rest]) => `${firstChar.toUpperCase()}${rest.join('')}`;

如果您使用其中一个正则表达式的答案,请记住它们只能使用ASCII字符.你所有的unicode字母都不会大写.该XRegExp如果你想坚持用正则表达式库和它的Unicode插件解决这个问题.所以像这样的东西会起作用:

String.prototype.capitalize = function () {
return this.replace(XRegExp("^\p{L}"), function ($0) { return $0.toUpperCase(); })
}

考虑到它仍然没有涵盖所有可能性(组合字符,请参阅http://www.regular-expressions.info/unicode.html),使用.charAt(0).toUpperCase()方法似乎更容易.


var capitalizeMe = "string not starting with capital"

利用substr进行资本化

var capitalized = capitalizeMe.substr(0, 1).toUpperCase() + capitalizeMe.substr(1);

仅用于大写第一个字母并使字符串的其余部分为小写:

function capitalize(str) {
var splittedEnter = str.split(" ");
var capitalized;
var capitalizedResult;
for (var i = 0 ; i < splittedEnter.length ; i++){
capitalized = splittedEnter[i].charAt(0).toUpperCase();
splittedEnter[i] = capitalized + splittedEnter[i].substr(1).toLowerCase();
}
return splittedEnter.join(" ");
}
capitalize("tHiS wiLL be alL CapiTaLiZED.");

结果将是:

编辑:感谢Peter Mortensen编辑:)


我只会使用正则表达式:

myString = '    the quick green alligator...';
myString.trim().replace(/^w/, (c) => c.toUpperCase());

好的,所以我是JavaScript新手.我无法让上述内容为我工作.所以我开始自己把它放在一起.这是我的想法(关于相同,不同和有效的语法):

String name = request.getParameter("name");
name = name.toUpperCase().charAt(0) + name.substring(1);
out.println(name);

在这里,我从表单中获取变量(它也可以手动工作):

String name = "i am a Smartypants...";
name = name.toUpperCase().charAt(0) + name.substring(1);
out.println(name);

输出:"我是Smartypants ......";


57 81这个问题的不同答案,有些是题外话的,但是没有一个提出了一个重要的问题,即列出的解决方案都无法在许多浏览器中使用亚洲字符,表情符号和其他高Unicode点值字符。这是一个解决方案,它将:

const consistantCapitalizeFirstLetter = "uD852uDF62".length === 1 ?
function(S) {
"use-strict"; // Hooray! The browser uses UTF32!
return S.charAt(0).toUpperCase() + string.substring(1);
} : function(S) {
"use-strict";
// the browser is using UCS16 to store UTF16
var code = S.charCodeAt(0)|0;
return (
code >= 0xD800 && code <= 0xDBFF ? // detect surrogate pair
S.slice(0,2).toUpperCase() + string.substring(2) :
S.charAt(0).toUpperCase() + string.substring(1)
);
};
const prettyCapitalizeFirstLetter = "uD852uDF62".length === 1 ?
function(S) {
"use-strict"; // Hooray! The browser uses UTF32!
return S.charAt(0).toLocaleUpperCase() + string.substring(1);
} : function(S) {
"use-strict";
// the browser is using UCS16 to store UTF16
var code = S.charCodeAt(0)|0;
return (
code >= 0xD800 && code <= 0xDBFF ? // detect surrogate pair
S.slice(0,2).toLocaleUpperCase() + string.substring(2) :
S.charAt(0).toLocaleUpperCase() + string.substring(1)
);
};

请注意,以上解决方案尝试考虑UTF32。但是,该规范正式声明,要求浏览器在映射到UCS2的UTF16中执行所有操作。但是,如果大家一起努力,开始准备UTF32,那么TC39就有可能允许浏览器开始使用UTF32(例如Python如何对字符串的每个字符使用24位)。对于讲英语的人来说,这似乎很愚蠢:没有人仅使用latin-1曾与Mojibake打交道因为所有字符编码都支持Latin-I。但是,其他国家/地区的用户(例如中国,日本,印度尼西亚等)并不那么幸运。他们不仅在网页上,而且还在Javascript中不断努力解决编码问题:Javascript将许多中文/日文字符视为两个字母,因此中间可能会被分开,从而导致?和?(两个对最终用户没有意义的问号)。如果我们可以开始准备使用UTF32,那么TC39可能只允许浏览器执行Python多年以前所做的事情,这使得Python在处理高Unicode字符方面非常受欢迎:使用UTF32。

consistantCapitalizeFirstLetter在IE3 +中可以正常工作。prettyCapitalizeFirstLetter需要IE5.5 +(请参阅本文档第250页的顶部)。但是,这些事实更多是个笑话,因为您的网页上的其余代码很可能甚至无法在IE8中使用-因为所有DOM和JScript错误以及这些旧版浏览器中缺少功能。此外,没有人再使用IE3或IE5.5。


1.我们将使用 CSS 来实现这一点。它也可以从外部 CSS 设置。

<span text-transform="capitalize ">The first letter of each word becomes an upper case</span>

2.使用 vanilla JavaScript,我们可以:

let string = "test case"
string = string[0].toUpperCase() + string.substring(1)
//return "Test case"

说明</b/>:

string[0].toUpperCase(): 将字符串中的第一个字母转换为大写

string.substring(1): 删除字符串中的第一个字母并返回剩余的字符

text-transform="capitalize": 使这个标签中每个单词的第一个字母大写。如果你使用 'uppercase' 作为 text-transform 的值,标签中的每个字母都将是大写字母


喜欢它:

function capitalize(string,a) {
var tempstr = string.toLowerCase();
if (a == false || a == undefined)
return tempstr.replace(tempstr[0], tempstr[0].toUpperCase());
else {
return tempstr.split(" ").map(function (i) { return i[0].toUpperCase() + i.substring(1) }).join(" ");
}
}
capitalize('stack overflow yeah!',true)); //Stack Overflow Yeah!
capitalize('stack stack stack stack overflow yeah!'));//Stack overflow yeah!

https://jsfiddle.net/dgmLgv7b/


单行:

'string'.replace(/(^[a-z])/,function (p) { return p.toUpperCase(); } )

一个小的改进 - 标题中的每一个字.

String.prototype.toTitleCase = function(){
return this.replace(/b(w+)/g, function(m,p){ return p[0].toUpperCase() + p.substr(1).toLowerCase() });
}
var s = 'heLLo wOrLD';
console.log(s.toTitleCase()); // Hello World

该函数有两个参数:

start - 开始索引;
length - 要大写的子字符串的长度

String.prototype.subUpper = function () {
var result = this.toString();
var start = 0;
var length = 1;
if (arguments.length > 0) {
start = arguments[0];
if (start < this.length) {
if (arguments.length > 1) {
length = arguments[1];
}
if (start + length > this.length) {
length = this.length - start;
}
var startRest = start + length;
var prefix = start > 0 ? this.substr(0, start) : String.empty;
var sub = this.substr(start, length);
var suffix = this.substr(startRest, this.length - startRest);
result = prefix + sub.toUpperCase() + suffix;
}
}
return result;
};

我一直在尝试使用jQuery执行相同的操作(即在键入字符串时将首字母大写)。我在网上搜索了所有答案,但找不到。但是我能够on()像这样在jQuery中使用该功能来解决:

$("#FirstNameField").on("keydown",function(e){
var str = $("#FirstNameField").val();
if(str.substring()===str.substring(0,1)){
$("#FirstNameField").val(str.substring(0,1).toUpperCase());
}
});

当数据输入者连续键入时,此函数实际上将首字母大写。


我在开发环境中使用了类似的方法,尤其是在使用HTTP之类的API时:

假设您有一个HTTP标头,您想在其中将每个首字母大写,并在其组成词之间添加连字符。您可以使用以下基本且简单的例程来实现类似目的:

'access control allow origin'
.replace(/bw/g, function (match) {
return match.toUpperCase();
})
.split(' ')
.join('-');
// Output: 'Access-Control-Allow-Origin'

它可能不是目前最优雅,最吸引人的函数定义,但是它确实可以完成工作。


首先,只想弄清楚在这种情况下大写的含义。“ 牛逼他的小号特林小号ç apitalized” 可靠的消息来源

从示例中可以看到,这不是OP所要查找的。它应该说的是“如何使字符串的首字母大写”(不大写字符串

function ucfirst (str) {
return typeof str !="undefined"  ? (str += '', str[0].toUpperCase() + str.substr(1)) : '' ;
}

讲解

typeof str !="undefined" // is str set
? // true
str += '' // turn the string variable into a string
str[0].toUpperCase() //get the first character and make it upper case
+ // add
str.substr(1) // string starting from the index 1 ( starts at 0)
: // false
''; //return empty string

这将适用于任何参数或根本没有参数。

undefined         === ""
""                === ""
"my string"       === "My string"
null              === "Null"
undefined         === "";
false             === "False"
0                 === "0"
true              === "True"
[]                === ""
[true,0,"",false] === "True,0,,false"

function capitalizeEachWord(str) {
return str.replace(/wS*/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}
document.write(capitalizeEachWord('foo BAR God bAD'));

一个班轮(“inputString 可以设置为任何字符串”):

inputString.replace(/.{1}/, inputString.charAt(0).toUpperCase())

这个很简单


最简单的解决方案是:

let yourSentence = 'it needs first letter upper case';
yourSentence.charAt(0).toUpperCase() + yourSentence.substr(1);

或者:

yourSentence.charAt(0).toUpperCase() + yourSentence.slice(1);

或者:

yourSentence.substr(0, 1).toUpperCase() + yourSentence.substr(1);

任何类型的字符串都可以转换——

你的字符串?你的弦

var str = yOuRsTrING.toLowerCase(); // Output: yourstring
str.charAt(0).toUpperCase() + str.slice(1); // Output: Y + ourstring = Yourstring

你可以做到str.replace(str[0], str[0].toUpperCase())

检查这个例子:

let str = "hello, WORLD!"
let newStr = str.replace(str[0], str[0].toUpperCase())
console.log("str: ", str)
console.log("newStr: ", newStr)

只需安装并加载Lodash:

import { capitalize } from "lodash";
capitalize('test') // Test

以上是如何在JavaScript中创建字符串大写的第一个字母?的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>