dedent を使ってテンプレートリテラルで複数行の文字列のインデントを調整する

dedent はテンプレートリテラルでの出力を整形してくれるライブラリです。

テンプレートリテラル記法は \n を記載せずとも改行をそのまま反映してくれるので便利ですが、開始位置に改行を加えたりインデントを揃えようとスペースを加えてしまうとそのまま出力されてしまい、見た目と出力に差が生まれて可読性が落ちてしまうことがあります。

テンプレートリテラルだけで複数行のテキストを出力

入力例

const text = `
  今日もいい天気ですね。
  明日も晴れるといいですね。
  水分はこまめに摂るようにしましょう。
    1. list-1
    2. list-2
    3. list-3
`;

console.log(text)

出力されるテキスト。

出力結果

(# 1行目の改行が入ってしまう)
  今日もいい天気ですね。 # 行頭のスペースがそのまま出力されてしまう
  明日も晴れるといいですね。
  水分はこまめに摂るようにしましょう。
    1. list-1
    2. list-2
    3. list-3
(# list-3 の後の改行が含まれてしまう)

期待する出力にするためには次のように修正する必要があります。

修正例

const text = `今日もいい天気ですね。
明日も晴れるといいですね。
水分はこまめに摂るようにしましょう。
  1. list-1
  2. list-2
  3. list-3`;

console.log(text)

dedent を使ってテンプレートリテラルだけで複数行のテキストを出力

dedent を使うとコード上のインデントをキープしつつ、出力に余計な改行・空白を含めないようにしてくれます。

インストール

www.npmjs.com

上記 package を npm でインストールします。

npm install dedent

TypeScript のプロジェクトであれば、TypeScript で書き直された ts-dedent を利用するのが良いかと思います。

www.npmjs.com

npm install ts-dedent

入力例

const dedent = require('dedent');
const text = dedent`
  今日もいい天気ですね。
  明日も晴れるといいですね。
  水分はこまめに摂るようにしましょう。
    1. list-1
    2. list-2
    3. list-3
`;

出力結果

今日もいい天気ですね。
明日も晴れるといいですね。
水分はこまめに摂るようにしましょう。
  1. list-1
  2. list-2
  3. list-3

Runkit での Demo も貼っておきます。実際の動作を確認したい人は下からどうぞ。

RunKit