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

Addy Osmani
Addy Osmani
X GitHub

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

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

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

構文

テンプレート文字列では、通常の文字列で使用される単一引用符や二重引用符ではなく、逆引用符（``）を使用します。テンプレート文字列は次のように記述できます。

var greeting = `Yo World!`;

ここまでのところ、テンプレート文字列は通常の文字列と何ら変わりませんでした。これを変更しましょう。

文字列の置換

最初の大きなメリットは文字列の置換です。置換を使用すると、有効な 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`);

タグ付きテンプレート

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

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 Tech Preview、Firefox 35 以降、io.js で使用できます。実用的な観点から、これらの機能を本番環境で使用したい場合は、Traceur や 6to5 などの主要な ES6 トランスパイラでサポートされています。試してみたい場合は、Chrome サンプル リポジトリのテンプレート文字列のサンプルをご覧ください。ES5 での ES6 と同等の機能もご覧ください。これは、現在の ES5 を使用してテンプレート文字列の簡素化を実現する方法を示しています。

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

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

関連情報