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

IT技术 javascript string letter capitalize
2021-02-04 20:35:26

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

例如:

  • "this is a test""This is a test"
  • "the Eiffel Tower""The Eiffel Tower"
  • "/index.html""/index.html"
6个回答

基本的解决办法是:

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

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

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

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

如果您想使用 Unicode 代码点而不是代码单元(例如处理基本多语言平面之外的 Unicode 字符),您可以利用String#[@iterator]使用代码点的事实,并且您可以使用toLocaleUpperCase获得区域设置正确的大写:

const capitalizeFirstLetter = ([ first, ...rest ], locale = navigator.language) =>
  first.toLocaleUpperCase(locale) + rest.join('')

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

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

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

Object.defineProperty(String.prototype, 'capitalize', {
  value: function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
  },
  enumerable: false
});

你会像这样调用这个函数:

"hello, world!".capitalize();

预期输出为:

"Hello, world!"
抱歉,不,只是不要向基本类型添加任何函数。扩展它们?const ExtendedString = class extends String { capitalize () { return this[0].toUpperCase() + this.slice(1) } } const s = new ExtendedString('hello') console.log(s.capitalize())
2021-03-22 20:35:26
@aggregate116​​6877 你能解释一下原因吗?这个答案有近 1500 票赞成。所以没有解释,人们只会忽略你。像我一样,因为我要做这个。
2021-03-27 20:35:26
@NielsLucas 够公平的。它有可能破坏 JS 的未来添加。如果它是只有您会使用的代码,那么还不错 - 您只需更新代码并继续。这里真正的问题是当您开始使用这样的代码发布库时:您的代码使用您的代码修改每个库的内置行为。结果是,如果你和另一个库作者都用你自己的实现覆盖了相同的内置函数,你会在另一个库的代码(或最后加载的代码)中创建错误,让用户调试不可复制的错误报告。
2021-03-27 20:35:26
@aggregate116​​6877 谢谢你的解释。我完全同意你的看法,这种方式不是创建库的好习惯,我也同意这种方式适用于项目。希望人们会阅读本文,因为我认为这是对原始答案的很好的关注。
2021-04-07 20:35:26

在 CSS 中:

p:first-letter {
    text-transform:capitalize;
}
此外,这只影响字符串的显示 - 而不是实际值。如果它是一个表单,例如,该值仍将按原样提交。
2021-03-10 20:35:26
这不是 JS,但我敢打赌,这是 99% 阅读本文的人的最佳答案。当然很高兴我滚动了这么远🙃
2021-03-13 20:35:26
问题是关于 javascript,而不是 css
2021-03-25 20:35:26
$('#mystring_id').text(string).css('text-transform','capitalize');
2021-03-29 20:35:26
@MartijnScheffer 这也是一个9 岁的评论
2021-04-08 20:35:26

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

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

ES版

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

// to always return type string event when s may be falsy other than empty-string
const capitalize = s => (s && s[0].toUpperCase() + s.slice(1)) || ""
只需使用 charAt() 而不是 []
2021-03-22 20:35:26

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

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

在此处输入图片说明

我想知道为什么最后一个方法这么慢,你每次迭代都将函数附加到原型吗?那将是不公平的
2021-04-02 20:35:26