You might have seen threads where developers debate whether to use string concatenation or template literals for building UI strings, URLs, and logs. If you are juggling variables, function outputs, and formatting in the same string, understanding interpolation can boost readability and reduce bugs.<\/p>\n\n\n\n
Hi all,<\/em> String interpolation is the process of inserting the result of expressions directly into a string. In JavaScript, the modern way to do this is with template literals, which use backticks and the Tagged templates let you post-process interpolated values, useful for formatting or escaping HTML.<\/p>\n\n\n Interpolation is great for composing delivery URLs and markup. If your app constructs image links, it helps to know how an image URL<\/a> is structured and how HTML images are embedded. See this guide to the HTML image tag<\/a> for attributes and best practices.<\/p>\n\n\n After you grasp interpolation, you can pair it with Cloudinary to generate dynamic, performant media URLs on the fly.<\/p>\n\n\n\n
I keep seeing template literals in code reviews and want to make sure I am using them correctly. What is string interpolation in JavaScript? How do I use it with template literals for variables, expressions, multiline strings, and conditional output? Are there pitfalls I should avoid, especially around security when inserting user input into the DOM?<\/em><\/p>\n\n\n\nAnswer:<\/h2>\n\n\n\n
${...}<\/code> placeholder. Let\u2019s dive a little deeper:<\/p>\n\n\n\nTemplate literal basics<\/h3>\n\n\n
const<\/span> name = 'Ari'<\/span>;\nconst<\/span> total = 19.99<\/span>;\nconst<\/span> message = `Hi ${name}<\/span>, your total is $${total.toFixed(2<\/span>)}<\/span>.`<\/span>;\nconsole<\/span>.log(message); \/\/ \"Hi Ari, your total is $19.99.\"<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n\n
`...`<\/code><\/li>\n\n\n\n${...}<\/code><\/li>\n\n\n\n\\n<\/code><\/li>\n<\/ul>\n\n\nconst<\/span> list = ['apples'<\/span>, 'oranges'<\/span>, 'pears'<\/span>];\nconst<\/span> summary = `You bought:\n- ${list.join('\\n- '<\/span>)}<\/span>\n\nThanks!`<\/span>;\nconsole<\/span>.log(summary);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nExpressions, conditionals, and functions<\/h3>\n\n\n
const<\/span> qty = 3<\/span>;\nconst<\/span> unit = 4.5<\/span>;\nconst<\/span> isMember = true<\/span>;\n\nconst<\/span> line = `Subtotal: $${qty * unit}<\/span> ${isMember ? '(member discount applies)'<\/span> : ''<\/span>}<\/span>`<\/span>;\nconsole<\/span>.log(line);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nCommon pitfalls<\/h3>\n\n\n\n
\n
undefined<\/code> or <\/strong>null<\/code> in output.<\/strong> Use default values, such as ${val ?? 'N\/A'}<\/code>.<\/li>\n<\/ul>\n\n\n\nEscaping backticks and placeholders<\/h3>\n\n\n\n
const literal = `Use backticks \\` and placeholders like \\${value}.`;<\/code><\/p>\n\n\n\nTagged templates for formatting and safety<\/h3>\n\n\n\n
function<\/span> escapeHTML<\/span>(strings, ...values)<\/span> <\/span>{\n\u00a0 const<\/span> esc = v => String(v)\n\u00a0 \u00a0 .replace(\/&\/g, '&'<\/span>)\n\u00a0 \u00a0 .replace(\/<\/g, '<'<\/span>)\n\u00a0 \u00a0 .replace(\/>\/g, '>'<\/span>)\n\u00a0 \u00a0 .replace(\/\"\/g, '"')\n\u00a0 \u00a0 .replace(\/'\/g, ''');\n\u00a0 return strings.reduce((out, str, i) => out + str + (i < values.length ? esc(values[i]) : ''), '');\n}\n\nconst userInput = '<script>alert(1)<\/script>';\nconst html = escapeHTML`<div class=\"<\/span>note\">${userInput}<\/div>`;\nconsole.log(html);<\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nEveryday patterns<\/h3>\n\n\n\n
\n
const<\/span> params = new<\/span> URLSearchParams({ q<\/span>: 'cats'<\/span>, page<\/span>: 2<\/span> });\nconst<\/span> url = <code<\/span>><\/span>\/search?${params}<\/code<\/span>><\/span><\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n\n
const<\/span> price = 39.5<\/span>;\nconst<\/span> formatted = `Total: ${new<\/span> Intl<\/span>.NumberFormat('en-US'<\/span>, { style: 'currency'<\/span>, currency: 'USD'<\/span> }<\/span>).format(price)}`<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nUsing interpolation with media URLs and HTML<\/h3>\n\n\n\n
\/\/ Example: Building a responsive <img> with a dynamic srcset<\/span>\nconst<\/span> publicId = 'samples\/landscapes\/beach'<\/span>;\nconst<\/span> widths = [480<\/span>, 768<\/span>, 1080<\/span>];\nconst<\/span> srcset = widths.map(w<\/span> =><\/span>\n\u00a0 `https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_${w}<\/span>,c_fill\/${publicId}<\/span>.jpg ${w}<\/span>w`<\/span>\n).join(', '<\/span>);\n\nconst<\/span> imgHTML = `\n\u00a0 <img\n\u00a0 \u00a0 src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_768,c_fill\/${publicId}<\/span>.jpg\"\n\u00a0 \u00a0 srcset=\"${srcset}<\/span>\"\n\u00a0 \u00a0 sizes=\"(max-width: 768px) 90vw, 768px\"\n\u00a0 \u00a0 alt=\"Beach\"\n\/>`<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nEnhancing the workflow with Cloudinary<\/h3>\n\n\n\n
\n
const<\/span> w = 600<\/span>, h = 400<\/span>;\nconst<\/span> publicId = 'samples\/animals\/kitten'<\/span>;\nconst<\/span> cldUrl = <code<\/span>><\/span>https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_${w},h_${h},c_fill,q_auto,f_auto\/${publicId}.jpg<\/code<\/span>><\/span><\/span>;\n\/\/ Use cldUrl in or CSS<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n\n
import<\/span> { Cloudinary } from<\/span> '@cloudinary\/url-gen'<\/span>;\nimport<\/span> { fill } from<\/span> '@cloudinary\/url-gen\/actions\/resize'<\/span>;\n\nconst<\/span> cld = new<\/span> Cloudinary({ cloud<\/span>: { cloudName<\/span>: 'demo'<\/span> } });\nconst<\/span> w = 800<\/span>, h = 450<\/span>, publicId = 'samples\/poi\/bridge'<\/span>;\nconst<\/span> img = cld.image(publicId)\n\u00a0 .format('auto'<\/span>)\n\u00a0 .quality('auto'<\/span>)\n\u00a0 .resize(fill().width(w).height(h));\nconst<\/span> optimizedUrl = img.toURL();<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n