7cc@はてなブログ

JavaScriptとかとか

JavaScriptでヒアドキュメントもどき 改行を扱う

追記

ES6から使えるようになった、Template stringsを使おう。

developer.mozilla.org

var str = `
line1
2
3
`

以下は古い情報。


JavaScriptにヒアドキュメントは無い。のでもどき
CSS, insertAdjacentHTMLなど改行した文字を(一列に直さず)改行を保持したまま利用したいときに。

MDNの Values, variables, and literals - JavaScript | MDNを見て単純な\n以外にも書き方があると知り調べた。

方法

  1. 単純な結合
  2. 配列
  3. エスケープ
  4. function + コメント + toString

1,2は一応書いておくだけでおススメしない

1. 単純な結合

var poem1 =
  "Roses are red,\n"+
  "Violets are blue.\n"+
  "I'm schizophrenic,\n"+
  "And so am I."

2. 配列
古いIEなどで速度を重視される場合に使われているのを見るが、書きにくい

var poem2 =
  ["Roses are red",
    "Violets are blue.",
    "I'm schizophrenic,",
    "And so am I."].join("\n")

3. エスケープ
MDNより。
弱点は大抵のシンタックスハイライトで色分けが機能しないことくらいでオススメ。

var poem3 = 
"Roses are red,\n\
Violets are blue.\n\
I'm schizophrenic,\n\
And so am I."

4. function + コメント + toString
node.jsで使われている。
最も原型に近いが、(1)圧縮した際にコメントが削除されたり、(2)環境によっては動かないかもしれない懸念があったりもする。
PCブラウザならIE8/9, GC, FFで動作したので問題ないと言える。

var poem4 = function(){
/*
Roses are red,
Violets are blue.
I'm schizophrenic,
And so am I.
*/
}.toString().replace(/function+\W+\*[^]\n|\s+\*\/\s+}$/g, "")

コメントの内容によってはreplaceが上手くいかないかもしれないので、正規表現のパターンいくつか
速度はあまり変わらないが、replaceの方がはやい

// 1 replace一回のみ
}.toString().replace(/function+\W+\*[^]\n|\s+\*\/\s+}$/g, "")
// 2 安全志向 空白が消えていいなら後半はtrim()で可
}.toString().replace(/function+\W+\*|\s+\*\/\s+}$/g, "").replace(/^\r\n|^\r|^\n/, "")
// 3 元ネタ
}.toString().split(/\r\n|\n/).slice(2, -2).join("\n")
// 4
}.toString().match(/\S*.+/gm).slice(2, -2).join("\n")

これはIEだとブラウザで使えないので非推奨
*/}.toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];