web-dev-qa-db-ja.com

es6テンプレート文字列内にコメントを含めることはできますか？

たとえば、複数行のes6 Template-Stringがあるとします。リクエストのいくつかのURLパラメータ：

const fields = `
    id,
    message,
    created_time,
    permalink_url,
    type
`;

そのバックティックテンプレート文字列内にコメントを含める方法はありますか？お気に入り：

const fields = `
    // post id
    id,
    // post status/message
    message,
    // .....
    created_time,
    permalink_url,
    type
`;
javascriptecmascript-6backtickstemplate-strings
18
lukash

番号。

その構文は有効ですが、コメントを削除してコメントなしの文字列を作成するのではなく、\n// post id\nidを含む文字列を返すだけです。

仕様の§11.8.6 を見ると、バックティック区切り文字の間で認識される唯一のトークンは、エスケープシーケンスを受け入れるTemplateCharactersであることがわかります、改行、および通常の文字。 §A.1 では、SourceCharacterは任意のUnicodeポイントとして定義されます（11.8.6で除外されたものを除く）。

8
ssube

オプション1：補間

空の文字列を返す interpolation ブロックを作成し、その中にコメントを埋め込むことができます。

_const fields = `
  id, ${ /* post id */'' }
  message, ${ /* post status/message */'' }
  created_time,
  permalink_url,
  type
`;

console.log(fields);_

オプション2：タグ付きテンプレート

タグ付きテンプレート を使用すると、コメントをクリアして文字列を再構築できます。 Array.map() 、 String.replace() を使用する単純なcommented関数と、正規表現（必要ないくつかの作業）コメントをクリアし、クリーンな文字列を返します：

_const commented = (strings, ...values) => {
  const pattern = /\/{2}.+$/gm; // basic idea

  return strings
    .map((str, i) => 
      `${str}${values[i] !== undefined ? values[i] : ''}`)
    .join('')
    .replace(pattern, '');
};

const d = 10;
const fields = commented`
  ${d}
  id, // post ID
  ${d}
  message, // post/status message
  created_time, // ...
  permalink_uri,
  type
`;

console.log(fields);_
57
Ori Drori

私はそれが古い答えであることを知っていますが、上記の答えを見ると、純粋な質問に答える必要があり、次に質問者の質問の精神に答える必要があります。

テンプレートリテラル文字列でコメントを使用できますか？

はい。はい、できます。しかし、それはきれいではありません。

_const fields = `
    id, ${/* post ID */''}
    message, ${/* post/status message */''}
    created_time, ${/*... */''}
    permalink_url,
    type
`;
_

_''_（空の文字列）に_${ }_中括弧は、JavaScriptが挿入する式を持つようにします。そうしないと、実行時エラーが発生します。引用符はコメントの外のどこにでも置くことができます。

私はこれの大ファンではありません。これはかなり醜く、コメントを煩雑にします。ほとんどのIDEでコメントの切り替えが難しくなることを気にしないでください。

個人的には、テンプレート文字列は通常の文字列よりもはるかに効率的であり、ほとんどの場合エスケープせずに文字通りすべてのテキストをキャプチャするため、可能な限りテンプレート文字列を使用します。あなたはそこに関数呼び出しを置くことさえできます！

上記の例の文字列は少し奇妙で、探しているものには役に立たない可能性があります。ただし、最初の改行、カンマとコメントの間に余分なスペース、最後の最後があるためです。改行。その不要なスペースを削除すると、パフォーマンスが少し低下する可能性があります。正規表現を使用して、速度と効率を上げることもできますが、その詳細については以下を参照してください...

。

次に、質問の意図に答えます。

すべての行にコメントを付けて、コンマ区切りのリスト文字列を書くにはどうすればよいですか？

_const fields = [
    "id", // post ID
    "message", // post/status message
    "created_time", //...
    "permalink_url",
    "type"
].join(",\n");
_

配列への参加は1つの方法です...（@ jared-smithが提案）

ただし、この場合は、配列を作成し、join()関数の戻り値のみを割り当てると、整理されたデータをすぐに破棄します。それだけでなく、配列内の各文字列に対してメモリポインターを作成しています。スコープの最後までガベージコレクションは行われません。その場合は、配列をキャプチャし、使用状況に応じてその場で結合するか、テンプレートリテラルを使用して、ghostDocスタイルのように実装に別のコメントを付ける方が便利です。

各行に引用符を付けたくないという欲求を満たすために、テンプレートリテラルのみを使用しているようです。URLとコードを見るときの「文字列」クエリパラメータ間の認識の不一致を最小限に抑えます。これにより改行が保持されることを認識しておく必要があります。代わりに検討してください：

_/****************
 * Fields:
 *   id : post ID
 *   message : post/status message
 *   created_time : some other comment...
 */
const fields = `
    id,
    message,
    created_time,
    permalink_uri,
    type
`.replace(/\s/g,'');
_

これは、正規表現を使用してすべての空白を除外し、リストを読みやすく再配置可能にします。正規表現リテラルが行っていることはすべて空白をキャプチャしていて、replaceメソッドがキャプチャしたテキストを_''_に置き換えます（最後のgは、見つかった最初の一致で停止しないように正規表現に伝えます。この場合、最初の改行文字）

または、最も厄介なことに、テンプレートのリテラルにコメントを直接入力し、正規表現を使用してコメントを削除することができます。

_const fields = `
    id, // post ID
    message, // post/status message
    created_time, // ...
    permalink_uri,
    type
`.replace(/\s+\/\/.*\*\/\n/g,'').replace(/\s/g,'');
_

最初の正規表現は、空の文字列（_''_）のすべてのインスタンスを検索して置換します。ダブルスラッシュの前にある1つ以上の空白文字（各スラッシュはバックスラッシュでエスケープされます）に続いて空白と改行文字。 _/* multiline */_コメントを使用する場合、この正規表現は少し複雑になります。最後に別の.replace()を追加する必要があります。

_.replace(/\/\*.*\*\//g,'')
_

その正規表現は、_\n_改行を取り除いた後にのみ実行できます。そうしないと、正規表現が複数行になったコメントと一致しなくなります。これは次のようになります。

_const fields = `
    id, // post ID
    message, /* post/
                status message */
    created_time, // ...
    permalink_uri,
    type
`.replace(/\s+\/\/.*\n/g,'').replace(/\s/g,'').replace(/\/\*.*\*\//g,'');
_

上記のすべてがこの文字列になります：

_"id,message,created_time,permalink_uri,type"_

たった1つの正規表現でそれを行う方法はおそらくありますが、実際にはここでは範囲外です。それに、自分で正規表現を使って遊ぶことをおすすめします。

これについては後で https://jsperf.com/ を取得するようにします。私は今とても興味があります！

9
Metagrapher

テンプレート文字列は使用しないでください。

const fields = [
    'id',  // comment blah blah
    'message',
    'created_time',
    'permalink_url',
    'type'
].join(',');

初期化時に配列とメソッド呼び出しのコストを支払います（JITが完全に最適化するほど賢くないと仮定します）。

Ssubeで指摘されているように、結果の文字列は改行や空白を保持しません。それはどれほど重要であるかによって異なります。必要に応じて「」と「\ n」を手動で追加するか、それほどひどいインラインコメントが本当に不要であると判断することができます。

更新

プログラムデータを文字列に格納することは、一般的に 悪い考え として保持されることに注意してください。代わりに、それらを名前付き変数またはオブジェクトプロパティとして格納します。あなたのコメントはあなたがたくさんのものをURLクエリ文字列に変換することを反映しているので：

const makeQueryString = (url, data) => {
  return url + '?' + Object.keys(data)
    .map(k => `${k}=${encodeURIComponent(data[k))})
    .join('&');
};

let qs = makeQueryString(url, {
  id: 3,
  message: 'blah blah',
  // etc.
});

これで、変更、理解、再利用が容易になり、コード分析ツールに対してより透過的なもの（IDE選択したものなど））が手に入りました。

2
Jared Smith