最近知った JavaScript のメソッドや記法の話

概要

こんにちは TOMMY です。
タイトルのとおりですが今日は JavaScript の話です。ぶっちゃけ別に大した内容じゃないんですが、最近こんなメソッドや記法を知って地味に便利で感動しているっていう話を書きたいと思います。

String.prototype.padStart()

String.prototype.padStart() - JavaScript | MDN

基本形

"1".padStart(2, 0); //=> "01"
"12".padStart(2, 0); //=> "12"

↓パッと思いつく使い方としては、日付などの 0 埋めなどでしょうか。

月を0埋めしてみる例

const date = new Date();
console.log(
  (date.getMonth() + 1).toString().padStart(2, 0)
); //=> "02"

ちなみに 0 埋めだけなら slice を使う手もあります。わりとこっちも好きです。
String.prototype.slice() - JavaScript | MDN

sliceを使った例

const date = new Date();
console.log(
  ("0" + (date.getMonth() + 1)).slice(-2)
); //=> "02"

ただ、前者のほうが英単語的に何をやっているかが直感的でわかりやすいかと思います。ん？直感的か？と思った方は、詰め物の pad (パッド) って考えればピンと来るんじゃないでしょうか。肩パッドとか、胸パッドとか(ぁ

Template literals (Template strings)

Template literals (Template strings) - JavaScript | MDN

こんなかんじでバッククオートを使うと文字列に式を埋め込むことができます。

使用例1-メソッド呼び出し

console.log(`現在は${new Date().getFullYear()}年です。`);
//=> 現在は2019年です。

使用例2-変数

const nowYear = new Date().getFullYear();
console.log(`現在は${nowYear}年です。`);
//=> 現在は2019年です。

使用例3-演算など

console.log(`現在は${2017 + 1 + 1}年です。`);
//=> 現在は2019年です。

下記はES5以前でよくやっていた文字列を連結する方法です。

ES6以前からある文字列連結

const nowYear = new Date().getFullYear();
console.log("現在は" + nowYear + "年です。");
//=> 現在は2019年です。

数が少なければこれでもいいんですが数が増えたり、区切りが細かくなってくると差は歴然としてくるとおもいます。

百聞は一見に如かずということでこちらをご覧ください。

テンプレートリテラルと従来の文字列連結の比較

//テンプレートリテラル
const template = `現在は${nowYear}年${month}月${date}日(${day})です。`
//従来の文字列連結
const concat   = "現在は" + nowYear + "年" + month + "月" + date + "日" + day + "です。"

明らかにテンプレートリテラルのほうが読みやすいかと思います。ついでに後者は書くのも面倒ですし、油断すると文字列の閉じクオート忘れたりもして余計面倒です(僕だけか

Support

• Can I use... pad-start-end
• Can I use... template-literals

今日紹介したものはどちらもIEはダメです。IEでどうしても使いたい場合は Babel 等によるトランスパイル必須です。IEはほんとWEB開発者泣かせですね

それにしても ES6 にさわりはじめたころは Babel が手放せなかったんですが、近頃は最新版の Chrome や Firefox なら軒並み素で動くようになってきましたね。

もしご存知なかったという方がいらっしゃいましたら、けっこう便利なので機会があればぜひ使ってみてください。

それでは。