web-dev-qa-db-ja.com

テンプレート文字列ES6は改行を防ぎます

私はES6テンプレート文字列を使用して構築する長い文字列を持っていますが、改行なしにしたいです：

var string = `As all string substitutions in Template Strings are JavaScript
              expressions, we can substitute a lot more than variable names.
              For example, below we can use expression interpolation to 
              embed for some readable inline math:`

console.log(string);

結果：

As all string substitutions in Template Strings are JavaScript
expressions, we can substitute a lot more than variable names.
For example, below we can use expression interpolation to
embed for some readable inline math:

私の期待：

As all string substitutions in Template Strings are JavaScript expressions, we can substitute a lot more than variable names. For example, below we can use expression interpolation to embed for some readable inline math:
javascriptecmascript-6template-strings
46
dim0_0n

これは非常識です。

ここでのほぼすべての答えは、適切にフォーマットするために関数runtimeを実行することを推奨しています。buildtime不正な形式のテキストoOその事実、特にパフォーマンスへの影響にショックを受けたのは私だけですか？

@dandavisが述べているように、 公式の解決策 （これはUNIXシェルスクリプトの歴史的な解決策でもあります）は、キャリッジリターンをエスパス文字でエスケープすることです：\

`foo \
bar` === 'foo bar'

シンプルで、パフォーマンスがあり、公式で、読みやすく、プロセスの中でシェルに似ている

53
Cyril CHAPON

改行は改行です...それらを手動で生成する場合、実行時にそれらを取得することが非常に期待できます。

ところで、私は今のところ3つの回避策を見つけます：

  1. IDEまたはコードエディターを構成して、ワードラップを実行します。必要がない場合、コードに改行を追加する必要はありません。エディターはコードを2つ以上に分割します。各コード文が設定された最大文字数を超える場合は行。

  2. String.prototype.replaceで改行を削除します：

 var string = `テンプレート文字列のすべての文字列置換はJavaScript 
式であるため、変数名よりもはるかに多くを置換できます。
たとえば、以下では式補間を使用して
いくつかの読みやすいインライン数学のために埋め込みます： `.replace（/\n/gm、" "）;

注意：ここでは、アンチパターンのように見え、パフォーマンスに影響を与える可能性のあるbuildtimeコードをフォーマットする関数runtimeを実行しています

  1. 連結を使用してこれらのコードの改行を実行します。
 var string = `テンプレート文字列のすべての文字列置換はJavaScript` 
 +`式なので、変数名よりもはるかに多くを置換できます。`
 + `たとえば、以下式の補間を使用して、 `
 +`いくつかの読みやすいインライン数学に埋め込みます： `;

私の場合、＃1オプションを選択します。

31
Matías Fidemraizer

ES6がある場合は、タグを使用できます。たとえば、 common-tagsライブラリのstripIndentタグ ：

経由でインストール：

_npm install common-tags --save
_

経由で必要：

_const stripIndent = require('common-tags/lib/stripIndent')
_

使用：

_stripIndent`
  As all string substitutions in Template Strings are JavaScript
  expressions, we can substitute a lot more than variable names.
  For example, below we can use expression interpolation to
  embed for some readable inline math:        
`
_

Edit：コメントで述べたように、希望する結果を得るには、おそらくconst oneLine = require('common-tags/lib/oneLine')タグを選択する必要があります。

前述のcommon-tagsリンクと このブログ の詳細

19
kvz

私は個人的に代わりに配列に参加する外観を好む：

var string = [
  `As all string substitutions in Template Strings are JavaScript`,
  `expressions, we can substitute a lot more than variable names.`,
  `For example, below we can use expression interpolation to`,
  `embed for some readable inline math:`
].join(' ');
12
jaybee

  • IDEを構成して、最初のコードスニペットのように、ラップしてテンプレート文字列1ライナーを使用します。

  • 改行する直前に\エスケープリテラルcharを使用します。

    例：

    const string = `1st line\
2nd line\ 
3rd line`;

    しかし、スペース調整の問題からあなたを救うことはありません。

  • 旧式のES5連結と「+」を使用します。

    例：

    const string = '1st line' + 
               '2nd line' + 
               '3rd line';

  • テンプレートの空の文字列var $ {''}でハックを使用します：

    例：

    const string = `1st line${'' 
               }2nd line${'' 
               }3rd line`;

1番目の方法ははるかに優れています、原因：

  • より少ない記号（サイズの側面）
  • ランタイム操作なし（パフォーマンスの側面）
9
Eugene Mihaylin

ES6では、ここで2つの上位の回答を組み合わせて使用​​することを好みます（_\_と.replace()の組み合わせ）。置換関数とエスケープ文字を組み合わせる利点は、コードブロックを残りのコードで一貫した形式に保つことができることを意味します。

_/\s{2}/g_は、2つ以上の連続したスペースのインスタンスを選択する正規表現です。

_const myMessage = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id urna \
    ligula. Suspendisse lobortis ex ut vestibulum venenatis. Donec imperdiet ante odio, \
    nec malesuada diam tristique eget. Lorem ipsum dolor sit amet, consectetur adipiscing \
    elit. Cras in vulputate tellus.`
  .replace(/\s{2,}/g, "");
_

これにより、プレーンで切れ目のない文字列が出力されます。

"Lorem ipsum dolor sit amet、conciptetur adipiscing elit。Duis id urna ligula。Suispendisse lobortis ex ut vestibulum venenatis。Donec imperdiet ante odio、nec malesuada diam trisique eget。Lorem ipsum dolor amet、consectetur elit。 tellus。 "

0
mdawsondev