JavaScript

JavaScript 中字符串第一个字母大写

Posted by cl9000 on June 20, 2020

To the one with a hammer, everything looks like a nail. （手中有锤，看什么都像钉）——<芒格>

作者：Ashish Lahoti
译者：cl9000
来源：https://codingnconcepts.com/javascript/how-to-capitalize-first-letter-of-string-in-javascript/

在本文中，我们将学习如何在 JavaScript 中大写字符串的第一个字母。

1. ‘capitalize’ 函数

你可以使用这个自定义的 make capitalize() 函数来将字符串的首字母大写:

1
2
3
4
5
6
7
// es5 way
function capitalize(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

// es6 way using destructuring 
const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('');

2. ‘capitalize’ 函数详细

让我们来看看使用 capitalize() 函数所涉及的步骤:

  • 使用 charAt() 方法获取字符串的第一个字母
1
2
3
const string = "string";

string.charAt(0);  // Returns "s"
  • 使用 toUpperCase() 方法将第一个字母转换为大写
1
2
3
const string = "string";

string.charAt(0).toUpperCase();  // Returns "S"
  • 使用 slice() 方法获取除第一个字母以外的字符串的其余部分
1
2
3
const string = "string";

string.slice(1);  // Returns "tring"

注意，slice(1) 的意思是从索引 1 到字符串末尾的子字符串。或者，你也可以使用 substring(1)。

  • 最后，将第一个大写字母添加到字符串的其余部分
1
2
3
4
5
6
7
var string = "string";

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

capitalize(string);  // Returns "String"

在字符串中添加 capitalize方法

我们还可以将自定义 capitalize() 函数添加到 String.prototype 方法，这样我们可以直接在字符串上使用它。

1
2
3
4
5
6
7
8
9
10
11
12
var string = "string";

/* this is how methods are defined in prototype of any built-in Object */
Object.defineProperty(String.prototype, 'capitalize', {
    value: function () {
        return this.charAt(0).toUpperCase() + this.slice(1);
    },
    writable: true, // so that one can overwrite it later
    configurable: true // so that it can be deleted later
});

string.capitalize(); // Returns "String"

大写给定字符串中每个单词的首字母

我们可以使用 capitalizeSentence 函数来大写句子中每个单词的首字母:

1
2
3
4
5
6
7
8
9
function capitalizeSentence(sentence) {
    return sentence
      .split(" ")
      .map(string => string.charAt(0).toUpperCase() + string.slice(1))
      .join(" ");
}

capitalizeSentence("a quick brown fox jumps over the lazy dog");
// "A Quick Brown Fox Jumps Over The Lazy Dog"

参考

关注【公众号】，了解更多。
关注【公众号】，了解更多。
关注【公众号】，了解更多。


赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！



FEATURED TAGS
JavaScript
FRIENDS