ES6 テンプレート文字列によるリテラルの取得

Addy Osmani

JavaScript の文字列は、これまで制限が多く、Python や Ruby などの言語に期待される機能がありませんでした。ES6 のテンプレート文字列（Chrome 41 以降で利用可能）は、この状況を根本的に変えます。ドメイン固有言語（DSL）で文字列を定義する方法が導入され、次の点が改善されました。

  • 文字列補間
  • 埋め込み式
  • ハックなしの複数行の文字列
  • 文字列の書式設定
  • 安全な HTML エスケープやローカライズなどのための文字列タグ付け。

テンプレート文字列は、現在の文字列に別の機能を詰め込むのではなく、これらの問題を解決するまったく新しい方法を導入します。

構文

テンプレート文字列では、通常の文字列で使用する単一引用符や二重引用符ではなく、バッククォート（``）を使用します。したがって、テンプレート文字列は次のように記述できます。

var greeting = `Yo World!`;

今のところ、テンプレート文字列は通常の文字列以上の機能を提供していません。これを変更しましょう。

文字列の置換

最初のメリットの 1 つは文字列の置換です。置換を使用すると、有効な JavaScript 式（変数の加算など）を取得し、テンプレート リテラル内で、結果が同じ文字列の一部として出力されます。

テンプレート文字列には、次の例に示すように、${ } 構文を使用して文字列置換のプレースホルダを含めることができます。

// Simple string substitution
var name = "Brendan";
console.log(`Yo, ${name}!`);

// => "Yo, Brendan!"

テンプレート文字列内のすべての文字列置換は JavaScript 式であるため、変数名よりもはるかに多くのものを置換できます。たとえば、次の例では、式補間を使用して、読みやすいインライン数式を埋め込んでいます。

var a = 10;
var b = 10;
console.log(`JavaScript first appeared ${a+b} years ago. Wow!`);

//=> JavaScript first appeared 20 years ago. Wow!

console.log(`The number of JS MVC frameworks is ${2 * (a + b)} and not ${10 * (a + b)}.`);
//=> The number of JS frameworks is 40 and not 200.

式内の関数にも非常に便利です。

function fn() { return "I am a result. Rarr"; }
console.log(`foo ${fn()} bar`);
//=> foo I am a result. Rarr bar.

${} は、メンバー式やメソッド呼び出しなど、あらゆる種類の式で正常に動作します。

var user = {name: 'Caitlin Potter'};
console.log(`Thanks for getting this into V8, ${user.name.toUpperCase()}.`);

// => "Thanks for getting this into V8, CAITLIN POTTER";

// And another example
var thing = 'template strings';
console.log(`Say hello to ${thing}.`);

// => Say hello to template strings

文字列内でバッククォートが必要な場合は、次のようにバックスラッシュ文字 \ を使用してエスケープできます。

var greeting = `\`Yo\` World!`;

複数行の文字列

JavaScript の複数行の文字列には、しばらくの間、ハッキーな回避策が必要でした。現在のソリューションでは、文字列は 1 行に存在するか、各改行の前に \（バックスラッシュ）を使用して複数行の文字列に分割する必要があります。次に例を示します。

var greeting = "Yo \
World";

この方法は最新の JavaScript エンジンでは問題なく動作しますが、動作自体はハックです。文字列連結を使用して複数行のサポートをシミュレートすることもできますが、これも望ましいものではありません。

var greeting = "Yo " +
"World";

テンプレート文字列を使用すると、複数行の文字列を大幅に簡素化できます。必要な場所に改行を挿入するだけで、完了です。次の例をご覧ください。

バッククォート構文内の空白文字も文字列の一部と見なされます。

console.log(`string text line 1
string text line 2`);

タグ付けされたテンプレート

これまでは、テンプレート文字列を使用して文字列の置換と複数行の文字列の作成を行ってきました。もう 1 つの強力な機能は、タグ付きテンプレートです。タグ付きテンプレートは、テンプレート文字列の前に関数名を配置することで、テンプレート文字列を変換します。次に例を示します。

fn`Hello ${you}! You're looking ${adjective} today!`

タグ付きテンプレート文字列のセマンティクスは、通常のテンプレート文字列のセマンティクスとは大きく異なります。本質的には、これらは特殊な関数呼び出しです。上記のコードは次のように「脱糖衣」されます。

fn(["Hello ", "! You're looking ", " today!"], you, adjective);

（n + 1）番目の引数が、文字列配列の n 番目と（n + 1）番目のエントリの間で行われる置換に対応していることに注意してください。これはさまざまな用途に役立ちますが、最も簡単なのは、補間された変数の自動エスケープです。

たとえば、次のような HTML エスケープ関数を作成できます。

html`<p title="${title}">Hello ${you}!</p>`

適切な変数が代入され、HTML で安全でない文字がすべて置き換えられた文字列を返します。そうしましょう。HTML エスケープ関数は、ユーザー名とコメントの 2 つの引数を取ります。どちらにも HTML で安全でない文字（'、"、<、>、&）が含まれている可能性があります。たとえば、ユーザー名が「Domenic Denicola」で、コメントが「& is a fun tag」の場合、次のように出力する必要があります。

<b>Domenic Denicola says:</b> "&amp; is a fun tag"

したがって、タグ付きテンプレート ソリューションは次のように記述できます。

// HTML Escape helper utility
var util = (function () {
    // Thanks to Andrea Giammarchi
    var
    reEscape = /[&<>'"]/g,
    reUnescape = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g,
    oEscape = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        "'": '&#39;',
        '"': '&quot;'
    },
    oUnescape = {
        '&amp;': '&',
        '&#38;': '&',
        '&lt;': '<',
        '&#60;': '<',
        '&gt;': '>',
        '&#62;': '>',
        '&apos;': "'",
        '&#39;': "'",
        '&quot;': '"',
        '&#34;': '"'
    },
    fnEscape = function (m) {
        return oEscape[m];
    },
    fnUnescape = function (m) {
        return oUnescape[m];
    },
    replace = String.prototype.replace
    ;
    return (Object.freeze || Object)({
    escape: function escape(s) {
        return replace.call(s, reEscape, fnEscape);
    },
    unescape: function unescape(s) {
        return replace.call(s, reUnescape, fnUnescape);
    }
    });
}());

// Tagged template function
function html(pieces) {
    var result = pieces[0];
    var substitutions = [].slice.call(arguments, 1);
    for (var i = 0; i < substitutions.length; ++i) {
        result += util.escape(substitutions[i]) + pieces[i + 1];
    }

    return result;
}

var username = "Domenic Denicola";
var tag = "& is a fun tag";
console.log(html`<b>${username} says</b>: "${tag}"`);
//=> <b>Domenic Denicola says</b>: "&amp; is a fun tag"

その他、自動エスケープ、フォーマット、ローカライズ、より複雑な置換などにも使用できます。

// Contextual auto-escaping
qsa`.${className}`;
safehtml`<a href="${url}?q=${query}" onclick="alert('${message}')" style="color: ${color}">${message}</a>`;

// Localization and formatting
l10n`Hello ${name}; you are visitor number ${visitor}:n! You have ${money}:c in your account!`

// Embedded HTML/XML
jsx`<a href="${url}">${text}</a>` // becomes React.DOM.a({ href: url }, text)

// DSLs for code execution
var childProcess = sh`ps ax | grep ${pid}`;

概要

テンプレート文字列は、Chrome 41 ベータ版以降、IE テクニカル プレビュー、Firefox 35 以降、io.js で使用できます。実際には、今日本番環境で使用したい場合は、Traceur や 6to5 などの主要な ES6 トランスパイラでサポートされています。試してみたい場合は、Chrome サンプル リポジトリのテンプレート文字列のサンプルをご覧ください。ES5 での ES6 の同等機能もご覧ください。このドキュメントでは、ES5 を使用して、テンプレート文字列がもたらす糖衣構文の一部を実現する方法を説明しています。

テンプレート文字列は、JavaScript に多くの重要な機能をもたらします。文字列と式の補間、複数行の文字列、独自の DSL の作成機能などが含まれます。

この機能の最も重要な特徴の一つは、タグ付きテンプレートです。これは、このような DSL を作成するための重要な機能です。テンプレート文字列の一部を引数として受け取り、文字列と置換を使用して文字列の最終出力を決定する方法を決定できます。

関連情報