/    Sign up×
Community /Pin to ProfileBookmark

How to handle and interpolate a dynamic template literal string’s format

How to handle and interpolate a dynamic template literal string’s format with values that can sometimes contain all 6 variables(maximum) but can contain format with sometimes just 2 variables, sometimes with sometimes just 4 variables. Please note order for the variables can be different.

I get template literal string’s format from database for cardLabel property to display. I have a deal object and the values will come from that object: deal={group: ‘aaa’, Desc: ‘abcd’ ….etc}

cardLabel’s dynamic template literal string’s format examples:

cardLabel='{Group} {Desc} – {termMonth} Month – {termOdometer} KMs/Miles {DeductibleAmount} {DeductibleType}’;

cardLabel='{Desc} – {termMonth} Month – {termOdometer} KMs/Miles’;

cardLabel='{Desc} {Group} – {termMonth} Month’;

cardLabel='{Group} {Desc} – {termMonth} Month {DeductibleAmount}’;

to post a comment
JavaScript

12 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERJan 13.2021 — Are all 6 (maximum) variables available for the template literal each time the display is to be constructed, even if not used each time?

Can you provide an example of the contents of these variables (brief list)?
Copy linkTweet thisAlerts:
@JMRKERJan 13.2021 — Giving a SWAG at the data to be displayed, here is something you can expand upon.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Template Literals </title>
<!-- From: https://www.webdeveloper.com/d/392388-how-to-handle-and-interpolate-a-dynamic-template-literal-strings-format -->
<style>

</style>

</head><body>

<script>
// cardLabel’s dynamic template literal string's format examples:

const cardLabel1
= (Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType) =>
<span><code>${Group} ${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles ${DeductibleAmount} ${DeductibleType}</code></span>;

const cardLabel2
= (Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType) =&gt;
<span><code>${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles</code></span>;

const cardLabel3
= (Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType) =&gt;
<span><code>${Desc} ${Group} - ${termMonth} Month</code></span>;

const cardLabel4
= (Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType) =&gt;
<span><code>${Group} ${Desc} - ${termMonth} Month ${DeductibleAmount}</code></span>;

console.log(cardLabel1('Group','Description','January','1000','DeductAmt','DeductType'));
console.log(cardLabel2('Group','Description','April','4000','DeductAmt','DeductType'));
console.log(cardLabel3('Group','Description','July','7000','DeductAmt','DeductType'));
console.log(cardLabel4('Group','Description','October','10000','DeductAmt','DeductType'));
console.log();


// Alternative constructs
const cardLabelA
= (Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType) =&gt;
<span><code>${Group} ${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles ${DeductibleAmount} ${DeductibleType}</code></span>;

const cardLabelB
= (Desc,termMonth,termOdometer) =&gt;
<span><code>${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles</code></span>;

const cardLabelC
= (Group,Desc,termMonth) =&gt;
<span><code>${Desc} ${Group} - ${termMonth} Month</code></span>;

const cardLabelD
= (Group,Desc,termMonth,DeductibleAmount) =&gt;
<span><code>${Group} ${Desc} - ${termMonth} Month ${DeductibleAmount}</code></span>;

console.log(cardLabelA('Group','Description','January','1000','DeductAmt','DeductType'));
console.log(cardLabelB('Description','April','4000'));
console.log(cardLabelC('Group','Description','July'));
console.log(cardLabelD('Group','Description','October','DeductAmt'));


&lt;/script&gt;

&lt;/body&gt;&lt;/html&gt;
Copy linkTweet thisAlerts:
@asifakhtarauthorJan 13.2021 — @JMRKER#1626729

contents : deal={group: 'aaa', Desc: 'abcd' ....etc}
Copy linkTweet thisAlerts:
@NogDogJan 13.2021 — @JMRKER#1626730 Replaced your single back-ticks with ... tags. ;)
Copy linkTweet thisAlerts:
@JMRKERJan 13.2021 — @NogDog#1626754

Thanks.

I just clicked on the instructions with "</>" in the reply section and it seemed to work at the time.

Is there some rule about using "</>" versus "[ code] ... [ /code]" versus "``" as shown in the section?

Appreciate the fix.
Copy linkTweet thisAlerts:
@JMRKERJan 13.2021 — Second attempt with OP's pseudo-data.
<i>
</i>&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/&gt;
&lt;title&gt; Template Literals &lt;/title&gt;
&lt;!-- From: https://www.webdeveloper.com/d/392388-how-to-handle-and-interpolate-a-dynamic-template-literal-strings-format --&gt;
&lt;/head&gt;&lt;body&gt;

&lt;pre id='demo'&gt;&lt;/pre&gt;

&lt;script&gt;
console.clear();
/* Following is for testing purposes only */
var demo='demo';
function log() { // separate lines
let s=''; for (const v of arguments) { s += v+' '; }
document.getElementById(demo).innerHTML += s+'&lt;br&gt;';
}
function logs() { // merged lines (single space)
let s=''; for (const v of arguments) { s += v+' '; }
document.getElementById(demo).innerHTML += s; // NO new line added
}
&lt;/script&gt;

&lt;script&gt;
const deal = {
Group: 'aaa',
Desc: 'abcd',
termMonth: 'January',
termOdometer: '12345',
DeductibleAmount: 25,
DeductibleType: 'Medical'
}

// cardLabel’s dynamic template literal string's format examples:

const cardLabel1 = ( deal ) =&gt; {
( { Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType } = deal );
return <span><code>${Group} ${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles ${DeductibleAmount} ${DeductibleType}</code></span>;
}
const cardLabel2 = ( deal ) =&gt; {
( { Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType } = deal );
return <span><code>${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles</code></span>;
}
const cardLabel3 = ( deal ) =&gt; {
( { Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType } = deal );
return <span><code>${Desc} ${Group} - ${termMonth} Month</code></span>;
}
const cardLabel4 = ( deal ) =&gt; {
( { Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType } = deal );
return <span><code>${Group} ${Desc} - ${termMonth} Month ${DeductibleAmount}</code></span>;
}

log(cardLabel1(deal));
log(cardLabel2(deal));
log(cardLabel3(deal));
log(cardLabel4(deal));

&lt;/script&gt;

&lt;/body&gt;&lt;/html&gt;

Copy linkTweet thisAlerts:
@NogDogJan 13.2021 — @JMRKER#1626756 The &lt;/&gt; button in the editor just puts single "back-tick" characters around the text, which apparently is really only telling the site to make it mono-spaced text. So it's fine for inline text like this, but loses indenting and stuff in a code block. (Also, if that code block happens to have a back-tick in it, you're kind of screwed. :) )

So, for a _block_ of code, your best bet is to surround it with ... tags. Alternatively, you can also use the "markdown" syntax of triple back-ticks...```...just before and just after the code block.

Yes, I agree, it would be nice if the code button put in code block tags instead of inline tags, but... 🤷‍♂️
Copy linkTweet thisAlerts:
@JMRKERJan 14.2021 — @NogDog#1626758 Thanks, I'll keep those suggestions in mind (until I lose it or forget again) :)
Copy linkTweet thisAlerts:
@asifakhtarauthorJan 16.2021 — @JMRKER#1626762 Thanks for you help but I was looking for something like that:

const deal = {

Desc: "description",

termMonth: "April",

termOdometer: "120",

Group: "ABC",

DeductibleAmount: "123"

};

let cardLabel='{Desc} - {termMonth} Month - {termOdometer} KMs/Miles';

Object.keys(deal).forEach(key => {

cardLabel = cardLabel.replace("{" + key + "}", deal[key]);

});

output.innerText = cardLabel;
Copy linkTweet thisAlerts:
@SempervivumJan 16.2021 — @asifakhtar#1626861 That code works fine. Are there any issues or questions left?
Copy linkTweet thisAlerts:
@JMRKERJan 17.2021 — @asifakhtar#1626861 There are many ways to remove the epidermis from a feline.

Whatever works to your satisfaction is the right answer for you.

Good Luck! :)
Copy linkTweet thisAlerts:
@rpg2009Jan 17.2021 — > @JMRKER#1626757 const cardLabel1 = ( deal ) => {

> ( { Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType } = deal );

> return ${Group} ${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles ${DeductibleAmount} ${DeductibleType};

> }


One step further, possibly
``<i>
</i>const cardLabel1 = ({ Group, Desc, termMonth, termOdometer, DeductibleAmount, DeductibleType }) =&gt; (
${Group} ${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles ${DeductibleAmount} ${DeductibleType}
)<i>
</i>
``


> @JMRKER#1626866 There are many ways to remove the epidermis from a feline

Skin a cat, in other words :)
×

Success!

Help @asifakhtar spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...