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>`;

所有这些，为什么不使用模板引擎？车把，Angular，Vue还是React？字符串中的这种模板并不是很容易维护，并且很快就会变成意大利面条。

在现有模板字符串内包含Javascript模板字符串

1 个答案: