javascript - 在现有模板字符串中包含 Javascript 模板字符串

Question

我有一个模板字符串，我需要根据用户类型在其中显示不同的内容。

const postTemplate = (data) => `
    <img alt="Image" src="/images/posts/${ data.post.imageName }" class="video-cover rounded img-fluid" data-action="zoom">
    <div class="d-flex align-items-center">
    <h5 class="mb-4" id="discussion">Discussion</h5>
    <div class="card">
        <div class="js-create-comment collapse px-3 py-2" id="create-comment" data-post-id="${ data.post.id }" aria-expanded="false">
            <div class="media">
                <div class="media-body steps-body">
                    // Include different according to user type
                </div>
            </div>
        </div>
    </div>
`;

我可以使用三元运算符，但内容很多，我认为这看起来真的很困惑。

任何人都可以建议我实现此目标的更好方法吗？是否可以在模板字符串内的三元运算符中包含不同的模板字符串？

Answer 1

我认为您已经回答了自己的问题“是否可以在模板字符串内的三元运算符中包含不同的模板字符串？”

const template1 = `<div>template1 markup</div>`;

const template2 = `<div>template2 markup</div>`;

const postTemplate = (data) => `<div>Some markup</div>
  ${ condition ? template1 : template2 }
  <div>More markup</div>`;

除此之外，为什么您不使用模板引擎呢？ Handlebars、Angular、Vue 还是 React？字符串中的这种模板不太易于维护，并且很快就会变成意大利面条。