Odroczenie wykonania dla liter szablonów ES6

Question

Odroczenie wykonania dla liter szablonów ES6

Bawię się nową funkcją ES6 Template Literals i pierwszą rzeczą, która przyszła mi do głowy, było String.format dla Javascript, więc postanowiłem zaimplementować prototyp:

String.prototype.format = function() {
  var self = this;
  arguments.forEach(function(val,idx) {
    self["p"+idx] = val;
  });
  return this.toString();
};
console.log(`Hello, ${p0}. This is a ${p1}`.format("world", "test"));

ES6Fiddle

Jednak szablon jest oceniany zanim zostanie przekazany do mojej metody prototypowej. Czy jest jakiś sposób, aby napisać powyższy kod, aby odroczyć wynik do momentu dynamicznego utworzenia elementów?

46

javascript ecmascript-6 template-literals

Author: Felix Kling, 2014-03-24

Source

2 answers

Zamieściłem odpowiedź na podobne pytanie, które daje dwa podejścia, w których wykonanie szablonu jest opóźnione. Gdy literał szablonu znajduje się w funkcji, literał szablonu jest oceniany tylko wtedy, gdy funkcja jest wywoływana i jest oceniany przy użyciu zakresu funkcji.

Https://stackoverflow.com/a/49539260/188963

0

Author: abalter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-28 18:55:09

score 58 · Accepted Answer

Widzę trzy sposoby na obejście tego:

Użyj ciągów szablonów, tak jak zostały zaprojektowane do użycia, bez żadnej format Funkcji:

console.log(`Hello, ${"world"}. This is a ${"test"}`);
// might make more sense with variables:
var p0 = "world", p1 = "test";
console.log(`Hello, ${p0}. This is a ${p1}`);
// or even function parameters for actual deferral of the evaluation:
const welcome = (p0, p1) => `Hello, ${p0}. This is a ${p1}`;
console.log(welcome("world", "test"));

Nie używaj ciągu szablonu, ale zwykłego ciągu literalnego:

String.prototype.format = function() {
    var args = arguments;
    return this.replace(/\$\{p(\d)\}/g, function(match, id) {
        return args[id];
    });
};
console.log("Hello, ${p0}. This is a ${p1}".format("world", "test"));

Użyj znacznika szablonu. Zauważ, że podstawienia nadal będą oceniane bez przechwytywania przez obsługę, więc nie możesz używać identyfikatorów takich jak p0 bez zmiennej o takiej nazwie. ~~to zachowanie może ulec zmianie, jeśli a Inna składnia ciała zastępczego propozycja jest akceptowana (Aktualizacja: nie była).~~

function formatter(literals, ...substitutions) {
    return {
        format: function() {
            var out = [];
            for(var i=0, k=0; i < literals.length; i++) {
                out[k++] = literals[i];
                out[k++] = arguments[substitutions[i]];
            }
            out[k] = literals[i];
            return out.join("");
        }
    };
}
console.log(formatter`Hello, ${0}. This is a ${1}`.format("world", "test"));
// Notice the number literals: ^               ^