Может ли JSX-подобный синтаксис быть достигнут в Javascript с минимальными функциональными возможностями?

Question

Я хочу знать, возможно ли написать все допустимые теги html внутри функции Javascript так, чтобы синтаксис выглядел как JSX, насколько это возможно, или просто так, чтобы разметка html не требовала записи в строках? Например, давайте представим функцию body (), которая будет выполнять что-то вроде этого:

body(`
 <h1>I am JavaScript</h1>
`);

Вывод:

 <h1>I am JavaScript</h1>

Я представляю, можно ли обновить функцию тела так, чтобы онаможет быть выполнено что-то вроде этого:

body( 
 return <h1>I am nearly alike JSX</h1>
);

Вывод:

 <h1>I am nearly alike JSX</h1>

Разве этот тип синтаксиса может быть достигнут только с помощью JSX? Можно ли это сделать с помощью некоторого кода в Javascript? Или это невозможно? Мне интересно узнать? Я знаю, что JSX поддерживает пользовательские теги, но сейчас давайте оставим это и сосредоточимся на всех допустимых тегах!

Заранее спасибо

Answer 1

Если вы не поддерживаете IE11 (или в любом случае переносите свой код), вы можете получить что-то подобное с тегами литералов шаблона :

function myjsx(html, ...args) {
  return html.slice(1).reduce((str, elem, i) => str + args[i] + elem, html[0]);
}

var hello = 'Hello';
var world = 'Arcanadian Arc';
document.body.innerHTML = myjsx`<h1>${hello} ${world}!</h1>`;

Есть даже библиотека, которая делает это: t7.js . И есть часть проекта спецификации JSX о том, почему они этого не делают: Почему бы не шаблонные литералы .