Include Javascript Template String Inside Existing Template String

Question

I have a template string and I need to display different content in it according to the user type.

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

I could use a ternary operator but there is a lot of content and I think this would look really messy.

Can anyone suggest a better way I can achieve this? Is it possible to include different template strings from within a ternary operator, inside a template string?

Adrian Brand · Accepted Answer · 2018-12-20 00:05:14Z

1

I think you have answered your own question with "Is it possible to include different template strings from within a ternary operator, inside a template string?"

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

All that aside why would you not use a templating engine? Handlebars, Angular, Vue or React? That kind of templating in strings is not very maintainable and turns to spaghetti very quickly.

answered Dec 20, 2018 at 0:05

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Include Javascript Template String Inside Existing Template String

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related