みかづきブログ その3

3ヶ月つづけてみました。

JavaScriptで変数に代入するテキストを複数行にする方法まとめ

var txt = "ふるいけや。かわずとびこむ。みずのおと。";

を読みやすくしようと思って、

var txt = "ふるいけや。
かわずとびこむ。
みずのおと。";

と書いてしまうとシンタックスエラーになるのは火を見るより明らかです。
改行方法を考えましょう。

+演算子で結合 その1

var txt = "ふるいけや。"
        + "かわずとびこむ。"
        + "みずのおと。";

個人的にはこれが好きなんでこう書いてます。
"=" と "+" を揃えるのがこだわりです。 非常に見やすいですね(主観)。

+演算子で結合 その2

var txt = "ふるいけや。" +
          "かわずとびこむ。" +
          "みずのおと。";

と書くひともいますね。
セミコロンの自動挿入を必要以上に恐れた結果と思われます(主観)。

\でエスケープ

var txt = "ふるいけや。"\
"かわずとびこむ。"\
"みずのおと。";

改行コードをエスケープしてしまう派もいるかもしれません。
僕は見にくいのであんまり好きではありませんが(主観)。



ただ、そもそも、

var txt = "ふるいけや。かわずとびこむ。みずのおと。";

ぐらいだったら1行で良いですね。
もっと長いテキストのときにご活用ください。



【追記: 親切なエンジニアにあと2つ方法を教えて頂きました。】

[].join

var txt = [
    "ふるいけや。",
    "かわずとびこむ。",
    "みずのおと。"
].join("");

一旦配列に収納してから1つの文字列に結合する方針です。
よく見る方法ですね。僕も最近この方法に乗り換えました。
この方法つかっている人とは仲良くなれそうな気がします(主観)。

toString

var txt = (function() {/*
ふるいけや。
かわずとびこむ。
みずのおと。
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1].replace(/\n|\r/g, "");

こんな方法はみたこともなければ、思いつきもしませんでした。
この方法をつかっている人とは仲良くなれないかもしれませんし、仲良くなれるかもしれません(主観)。



【さらに追記: モダンなエンジニアに教えて頂きました。】

テンプレート

var txt = (function(param) {return param[0].replace(/\n|\r/g, "");})`
ふるいけや。
かわずとびこむ。
みずのおと。`;

モダンなエンジニアに「ES6のテンプレートをつかえばいいのでは?」と言われたので挑戦してみました。


テンプレート文字列 - JavaScript | MDN

改行コードごと引数に渡して改行コードを消し去ったものをリターンしています。モダンですね。
ES6でもコードが書けることでおなじみ(?)の jsdo.it で試してみましたが、しっかり動作しています。


ECMAScript 6で書いたJavaScriptのコードをECMAScript 5に変換する - みかづきブログ その3



【さらに追記の追記】

上記ES6のコードですが Chrome Canary でも試すことができることがわかりました。お試しあれ。


Chrome Canary でES6を試す - みかづきブログ その3



今回は以上です。




ツイッターやってます!