Bonfire: title case a sentence、string.charAt(x)とstring[x]の違い

課題内容

str値としていれた単語もしくは文章の最初の一文字を大文字にして返す関数を作れという問題。ちなみに普段なら"the"や"of"などは大きくしないが今回はそれも考慮することになっている。

function titleCase(str) {
  return str;
}

titleCase("I'm a little tea pot");

Give it a shot

ここを参考にとりあえず書いてみた。

function titleCase(str) {
    str = str.toLowerCase().split(" ");
    for (var i = 0; i < str.length; i++) {
        str[i] = str[i].split("");
        str[i][0] = str[i][0].toUpperCase();
        str[i] = str[i].join("");
    }
    return str.join(" ");
}
titleCase("I'm a little tea pot");

手順としては、
1. 引数としてもらってきたstrを全て小文字にしてスペースで区切ってその単語を1つずつarrayに入れる
2. for loopでarrayの長さ分だけ（5回分＝区切った単語数）以下の処理を行ってもらう
3. 先程arrayに入れた単語を今度は一文字ずつsplitして別のarrayに入れる（＝array階層の下にもう一つarrayをつくる感じ？）
4. そのarrayの最初の一文字(=str[i][0])を大文字変える
5. str[i] = str[i].join("")で大文字の一文字arrayを最初に作った単語arrayとくっつける
6. 最後にstr.join(" ")で作り上げた材料を全てスペース付きでくっつけてreturnさせる

*全く同じことを紹介している記事を発見。より懇切丁寧に解説してくれています。

Alternative#1

他の解答方法も勉強になったので載せておきます。

function titleCase(str) {
    str = str.toLowerCase().split(' ');
    for (var i = 0; i < str.length; i++) {
        str[i] = str[i].charAt(0).toUpperCase() + str[i].substring(1);
    }
    return str.join(' ');
}
titleCase("I'm a little tea pot");

charAt(x)って？string[x]との差異は？

charAtは指定したstringを返してくれる返してくれるメソッド。概要はこちらを参考に。string.charAt(x)とstring[x]の違いがいまいち分からなかったのでぐぐってみたらこんな質問を見かけた。どうやらIE7ではstr[x]に対応していないらしくエラー表示されてしまうらしい。一度こちらの方法で書いてしまうと後で直すのに相当な苦労を強いられるとか。よってcharAt(x)を使ったほうが安全だそう。ソースとしてこちらのサイトが紹介されていたので興味のある方はぜひ。今回のケースではcharAt(x)のほうがわざわざarrayの中にarrayをつくるという手間が省けて楽そう。

substring()とは？

一言で言うと「選択した範囲の文字を引っ張ってきてくれるメソッド」とでも言うのだろうか。var str = "hello world";に対してvar str2 = str.substring(3);とやるとlo world!と返ってくる。もしくはvar str3 = str.substring(4, 1);のようにひとつ目の引数が２つ目の引数より大きい場合は自動的にひっくり返してellと返してくれる。引数が0以下の場合は0としてみなされストリングをまるごと返す。詳しくはこちらを参照。

つまりstr[i] = str[i].charAt(0).toUpperCase() + str[i].substring(1);一箇所で上記で３行文の仕事をしてくれるわけだ。str[i].charAt(0).toUpperCase()で最初の一文字を大きくして残りの単語str[i].substring(1)とくっつけてしまうと。

Alternative#2

正規表現を使ってもっと短くすることも可能。

function titleCase(str) {
    str = str.toLowerCase();
    str = str.replace(/(^[a-z]|\s[a-z])/g, function(c){return c.toUpperCase();});
    return str;
}
titleCase("I'm a little tea pot");