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 の仕様になってないから、ということかな。
タグ関数とか、なんか気持ち悪いのもある。
- Template literal - JavaScript | MDN - タグ付けされたTemplate string
- String.raw() - JavaScript | MDN
なんか、使い道 あるんだろうか……
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 |