Template Strings

見た目を作ったりいじったりするような Bookmarklet なんかでは、HTML の要素やスタイルを文字列でたくさん書かなきゃいけないこともママあり。
でも、javascript にはヒアドキュメントがないので、こんな書き方でお茶を濁してた。

/*
#qa_chemistry {
    position: absolute;
    top: 0;
    right: 0;
    background-color: palegreen;
    z-index: 9999;
    padding: 5px;
}
#qa_chemistry table.info tr td {
    line-height: 1em;
}
*/
var css_rule = '\
#qa_chemistry {\
    position: absolute;\
    top: 0;\
    right: 0;\
    background-color: palegreen;\
    z-index: 9999;\
    padding: 5px;\
}\
#qa_chemistry table.info tr td {\
    line-height: 1em;\
}\
';

実体はコメントで書いておいて、コードの方にはコピペして行末の改行を \ でエスケープする。
改行のエスケープは、範囲選択して :s/$/\\/ するだけなのでたいした手間ではないとはいえ、やっぱり面倒でコードの方を修正してしまってコメントに書いた方の本体と合わなくなってたり。

「テンプレート文字列」を教えてくれたのはここ。
expand title on drive.google.com for UserScript · GitHub
# ここでもお世話になってます >id:noromanba さん

「あれ? 改行のエスケープって要らなかったかな……」

とか思って試してみると、やっぱりエラー。

  ……


よくよく見てみると、括ってるのはバッククォートじゃない。

こう書けるようになったのだね。

var css_rule = `
#qa_chemistry {
    position: absolute;
    top: 0;
    right: 0;
    background-color: palegreen;
    z-index: 9999;
    padding: 5px;
}
#qa_chemistry table.info tr td {
    line-height: 1em;
}
`;

ドキュメントを確認。

ありゃ、リテラル扱いではない?

In ES2015, template literals are also available. Template strings provide syntactic sugar for constructing strings. This is similar to string interpolation features in Perl, Python and more. Optionally, a tag can be added to allow the string construction to be customized, avoiding injection attacks or constructing higher level data structures from string contents.

Grammar and types - JavaScript | MDN

日本語訳の方が追いついてないだけか。

JavaScript に "ヒアドキュメント" 構文はありませんが、各行の末尾に改行のエスケープ表記とエスケープした改行を置くことで似たことができます :

文法とデータ型 - JavaScript | MDN

もう、ここも変えた方が良いんじゃないかなあ。

Although JavaScript does not have "heredoc" syntax, you can get close by adding a linebreak escape and an escaped linebreak at the end of each line:

Grammar and types - JavaScript | MDN

と思ったら、英語のドキュメントの方にも。
まだ、正式に ECMAScript 6 の仕様になってないから、ということかな。


タグ関数とか、なんか気持ち悪いのもある。

なんか、使い道 あるんだろうか……

var s = "http://q.hatena.ne.jp/";
var re;

re = /https?:\/\/\S+(\.\S+)*\//;
console.log(re.test(s));	// true
// スラッシュ入るとウザい

re = new RegExp("https?://\S+(\.\S+)*/");
console.log(re.test(s));	// false
// バックスラッシュをエスケープする必要あり

re = new RegExp("https?://\\S+(\\.\\S+)*/");
console.log(re.test(s));	// true
// ふたつ並んだバックスラッシュ ウザい

re = new RegExp(`https?://\S+(\.\S+)*/`);
console.log(re.test(s));	// false
// やっぱり、バックスラッシュをエスケープしなくちゃならない

re = new RegExp(String.raw`https?://\S+(\.\S+)*/`);
console.log(re.test(s));	// true
// 素直に正規表現が書ける

とかかな。

タグ関数はどうかなあ……
内挿された値だけに何か処理を施すとか、そういうのかな。




それにつけても、Hatena::Let のむごさよ。

DATE POST
2014/11/21 02:05
1,507
2015/02/17 02:14
1,651
2015/03/14 23:31
1,665
2015/04/26 17:01
1,684
2015/07/17 01:04
1,727
2015/08/26 03:03
1,745
2015/09/06 04:06
1,757
2016/01/29 20:51
1,870
2016/02/29 21:17
1,890
2016/03/14 00:30
3,253
2016/03/17 13:20
4,018
2016/04/01 23:26
9,816
2016/04/04 09:49
10,709
2016/04/06 22:19
12,337
2016/04/12 11:28
15,554
2016/04/27 10:56
24,404
2016/04/28 12:42
24,913