使用 JavaScript 将每个数组元素的首字母大写答案

【问题标题】：Capitalize first letter of each array element using JavaScript使用 JavaScript 将每个数组元素的首字母大写
【发布时间】：2019-04-20 13:38:18
【问题描述】：

我有一串文本，我在每个逗号上分成了一个数组。然后我循环遍历数组并将每个元素一个一个地添加到一个字符串中，但使用换行符将它们分开。

var beg2 = document.twocities.begins.value;
var ans22 = "";
var words2 = beg2.split(",");

for(var i=0; i<words2.length; i++){
    ans22 += words2[i] + "<br>"; 
}

document.getElementById("ans22").innerHTML = ans22;

现在我正在尝试使用此代码将每行的第一个字母大写，但只有整个字符串的第一个字母最终被大写，而不是每行的第一个字母。

var ans23 = "";

for (var i=0; i<words2.length; i++){
    firstLetter = words[i].charAt(0);
    firstLetterCap = words[i].charAt(0).toUpperCase();
    words[i].replace(firstLetter,firstLetterCap);
    ans23 += words2[i] + "<br>"; 
}

任何建议将不胜感激。

【问题讨论】：

replace() 不会更改字符串，您必须从中保存返回值

标签： javascript arrays string replace char

【解决方案1】：

您不需要使用.replace()。使用.charAt(0) 选择字符串的第一个字符，使用.slice() 选择字符串的下一部分

var beg2 = "first,second,third";
var ans22 = "";
var words = beg2.split(",");

for (var i=0; i<words.length; i++){
  words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
  ans22 += words[i] + "<br>"; 
}
document.getElementById("ans22").innerHTML = ans22;

&lt;div id="ans22"&gt;&lt;/div&gt;

您也可以使用 CSS ::first-letter 伪元素和 text-transform 属性来完成这项工作。

var str = "first,second,third";
document.getElementById("ans22").innerHTML = str.split(",").map(function(val){
  return "<div>"+val+"</div>"
}).join("");

#ans22 div::first-letter {
  text-transform: capitalize;
}

&lt;div id="ans22"&gt;&lt;/div&gt;

【讨论】：

如果你将每一个都插入<div>，你也可以选择跳过.toUpperCase()，只使用CSS：#ans22::first-letter {text-transform:capitalize;}
@ryantdecker 很好的提及。已添加
不需要定位第一个字母。 capitalize 属性已经做到了这一点。如果您要定位，请改用大写。
@JacobPariseau 不，如果字符串包含两个单词，capitalize 考虑每个单词的第一个字符，但 OP 需要每行的第一个字符

【解决方案2】：

您可以使用map 将句子中的每个单词转换为其大写版本，然后将数组重新连接成一个句子，从而大大简化这一过程：

var sentence = 'hello world test';
var capitalized = sentence
                  .split(' ')
                  .map(w => w.charAt(0).toUpperCase() + w.slice(1))
                  .join('<br>');

console.log(capitalized);

【讨论】：