変数と文字列テンプレートリテラルタグ付きテンプレートリテラル、カスタム処理

入門JavaScriptプログラミング
 楽天ブックス
Yahoo!ショッピング
au PAY マーケット

開発環境

入門JavaScriptプログラミング (JD Isaacks(著)、株式会社クイープ(監修、翻訳)、翔泳社)のUNIT1(変数と文字列)、LESSON 7(テンプレートリテラル)、7.5(練習問題)、Q7-1の解答を求めてみる。

コード

function withProps() {
    let stringParts = arguments[0],
        values = [].slice.call(arguments, 1);
    return stringParts.reduce(
        function (memo, nextPart) {
            let value = values.shift();
            if (value.constructor === Object) {
                value = Object.keys(value)
                    .map(function (key) {
                        return `${key}="${value[key]}"`;
                    }).join(' ');
            }
            return memo + value + nextPart;
        }
    );
}

const props = {
    src: 'http://fillmurray.com/100/100',
    alt: 'Bill Murray'
};
const img = withProps`<img ${props}>`;

console.log(img);

入出力結果(Terminal、Zsh)

% node sample1.js
<img src="http://fillmurray.com/100/100" alt="Bill Murray">
%