テンプレートを自作しよう。（現代的JavaScriptおれおれアドベントカレンダー2017 – 13日目）

// 連結するだけの（非現実的な）タグ関数
function tagger(template, ...substitutions) {
  console.log(template[0]);  // => "hoge "
  console.log(template[1]);  // => " fuga "
  console.log(template[2]);  // => " piyo"
  console.log(substitutions[0]);  // => 10
  console.log(substitutions[1]);  // => 25

  return template[0] + substitutions[0] + template[1] + substitutions[1] + template[2];
}

const n = 10;
console.log(      `hoge ${n} fuga ${20 + 5} piyo`);  // => "hoge 10 fuga 25 piyo"
console.log(tagger`hoge ${n} fuga ${20 + 5} piyo`);  // => "hoge 10 fuga 25 piyo"

console.log(String.raw`foo\nbar\n${"boo"}`);  // => "foo\\nbar\\nboo"

function plain(strings, ...values) {
  // strings[0] === "hoge "
  // values[0] === 10
  // strings[1] === " fuga "
  // values[1] === 25
  // strings[2] === " piyo"

  // 文字列を連結してゆく変数
  // （初期値として先頭のもの "hoge " を与えておく。）
  let result = strings[0];

  // 先頭は既に追加済みなので飛ばし、
  // 残りを順次追加
  for (var i = 1; i < strings.length; i++) {
    result += values[i - 1] + strings[i];
  }

  return result;
}

const n = 10;
console.log(     `hoge ${n} fuga ${20 + 5} piyo`);  // => "hoge 10 fuga 25 piyo"
console.log(plain`hoge ${n} fuga ${20 + 5} piyo`);  // => "hoge 10 fuga 25 piyo"

// 普通に結合
function plain(strings, ...values) {
  return strings.slice(1).reduce((result, s, i) => result + values[i] + s, strings[0]);
}

console.log(plain`hoge ${1} fuga ${2} piyo`)

// decimal-regularized text
function drt(strings, ...values) {
  let result = '';

  for (let i = 0; i < strings.length; i++) {
    result += strings[i];

    const value = values[i];
    if (typeof value === 'number') {
      const sValue = Math.floor(value * 100).toString();  // 3.1415 -> 314.15 -> 314 -> "314"
      const srValue = `${sValue.slice(0, -2)}.${sValue.slice(-2)}`;  // "314" -> "3" + "." + "14"
      result += srValue;
    }
  }

  return result;
}

console.log(drt`πは${Math.PI}です。`);  // => "πは3.14です。"
console.log(drt`私の身長は${167.3}cmです。`);  // => "私の身長は167.30cmです。"
console.log(drt`私の体重は${66}kgです。`);  // => "私の体重は66.00kgです。"

// decimal-regularized text
function drt(digits) {
  // この中身は、digitsを使ってる以外はさっきのと一緒
  return function(strings, ...values) {
    let result = '';

    for (let i = 0; i < strings.length; i++) {
      result += strings[i];

      const value = values[i];
      if (typeof value === 'number') {
        const sValue = Math.floor(value * 10 ** digits).toString();  // 3.1415 -> 314.15 -> 314 -> "314"
        const srValue = `${sValue.slice(0, -digits)}.${sValue.slice(-digits)}`;  // "314" -> "3" + "." + "14"
        result += srValue;
      }
    }

    return result;
  }
}

const drt1 = drt(1);
console.log(drt1`πは${Math.PI}です。`);  // => "πは3.1です。"

const drt5 = drt(5);
console.log(drt5`πは${Math.PI}です。`);  // => "πは3.14159です。"

function html(strings, ...values) {
  // 普通に結合
  const html = strings[0] + strings.reduce((result, s, i) => values[i-1] + s, '');

  // DOMツリー生成
  // （サボってjQuery使います。）
  const tree = jQuery(html)[0];

  return tree;
}

const title = 'Hello World!';
document.body.appendChild(html`
  <div class="main">
    <h1>${title}</h1>
  </div>`)

// データ
const items = [
  { name: 'Sugoi pen', price: '3000' },
  { name: 'Sugokunai pen', price: '130' },
];

// 「DOMを生成する関数」を返すタグ関数
function html(strings, ...keys) {
  // DOMを生成する関数
  return function(data) {
    // 結合
    let html = strings[0];
    for (var i = 1; i < strings.length; i++) {
      const key = keys[i - 1];
      const value = data[key];
      html += value + strings[i];
    }

    // DOMツリー生成
    // （サボってjQuery使います。）
    const tree = jQuery(html)[0];

    return tree;
  };
}

// テンプレート
const itemTemplate = html`
  <li class="sugoi-item">
    ${'name'}
    <span class="price">(${'price'}円)</span>
  </li>
  `;

// 実行
const elList = document.querySelector('ul#yabai-list');
items.forEach(data => {
  elList.appendChild(itemTemplate(data));
});

const MyComponent = {
  props: {
    simpleString: { type: String },
    requiredNumber: { type: Number, required: true },
    defaultBoolean: { type: Boolean, default: true },
  }
}

const pt = require('vue-props-template')
 
const MyComponent = {
  props: pt`
    string simpleString
    required number requiredNumber
    boolean defaultBoolean = ${true}
  `
}

String.raw(['foo', 'bar'], 1);  // Exception: TypeError: can't convert undefined to object

String.raw({ raw: ['foo', 'bar'] }, 1);  // => "foo1bar"

function rawSomething(strings, ...values) {
  const rawStrings = strings.raw;
  // ...
}