Chapter 3: Template Literals for Dynamic Strings & JSX Text

📺 Video Explanation

Watch the full explanation of these notes here: https://youtu.be/NtFqgY0U1lE

In mobile development, dynamic text is everywhere. User greetings change with authenticated profiles, API endpoints require dynamic query parameters, and UI components constantly format metrics like stock levels, product discounts, cart counts, and currency totals.

Before ES6, combining dynamic data with static text meant relying on verbose and brittle string concatenation. Template literals modernize this workflow by replacing plus-operator chains with clean, readable string interpolation, expression evaluation, and native multi-line formatting.

1. The Syntax Evolution: String Concatenation vs. Template Literals

The Old Way: Plus Operator (+) Concatenation

Prior to ES6, joining strings and variables required chaining double or single quotes with the addition operator (+):

const name = "Subrata";
const orderId = "ord_98742";

const message = "Hello, " + name + "! Your order #" + orderId + " has been placed.";

While functional, this approach introduces common failure points:

• Fragile Spacing: Missing or extra spaces between quotes and variables.
• Syntax Noise: Excessive quotation marks and plus signs break visual scanning.
• Complex Interpolation: Adding ternary checks or arithmetic turns strings into unreadable, fragmented expressions.

Here are individual examples demonstrating each of the failure points associated with traditional string concatenation.

For consistency, all examples are based on the product data structure from the e-commerce API ([https://backend.ecom.subraatakumar.com/api/v1/products](https://backend.ecom.subraatakumar.com/api/v1/products)).

1. Fragile Spacing

The developer must manually manage spaces inside the quotes. It is easy to miss a space or add too many, resulting in poorly formatted text that the compiler won't catch.

// Data from API lookup
const product = { title: "Road Runner Shoes", price: 95 };

// ❌ BUG: Missing spaces after "Product:" and before "costs".
// Results in: "Product:Road Runner Shoescosts $95"
const badSpacing = "Product:" + product.title + "costs $" + product.price;

// ❌ BUG: Extra space before period.
// Results in: "Item: Road Runner Shoes ."
const extraSpacing = "Item: " + product.title + " .";

console.log(badSpacing);
console.log(extraSpacing);

2. Syntax Noise

Excessive quotation marks and plus signs break visual scanning. As the number of variables increases, the code becomes harder to read and maintain, resembling logic rather than the sentence it creates.

// Data from API lookup
const product = { id: "p101", title: "Shoes", price: 95, category: "Footwear" };

// ❌ HARD TO READ: The "prose" is completely obscured by operators and quotes.
// Scanning this to quickly understand the output format is difficult.
const description = "Product: " + product.title + " (ID: " + product.id + ") belongs to the " + product.category + " category and retails for $" + product.price + ".";

console.log(description);

3. Complex Interpolation

Adding arithmetic or ternary checks within plus-sign chains requires complex parenthesis management. This turns the string construction into unreadable, fragmented expressions.

// Data from API lookup (stockCount can be 0 or null)
const product = { title: "Shoes", price: 95, stockCount: 0 };

// ❌ UNREADABLE: manages state changes and currency formatting inline using concatenation.
const statusReport = "Item: " + product.title + " is currently " + (product.stockCount > 0 ? "In Stock" : "Out of Stock") + " and costs $" + (product.price * 1.08).toFixed(2) + " including tax.";

console.log(statusReport);

The Modern Way: Backticks & ${} Interpolation

Template literals use backticks (```) instead of standard quotes (" or '), using the ${} placeholder syntax to inject values directly:

Here is how the modern approach using template literals completely resolves the failure points associated with traditional string concatenation.

For comparison, we have rewritten the identical scenarios using data structures from the e-commerce API ([https://backend.ecom.subraatakumar.com/api/v1/products](https://backend.ecom.subraatakumar.com/api/v1/products)).

1. Solving Fragile Spacing

Template literals preserve whitespace exactly as written inside the backticks. The developer focuses on writing the natural sentence, not managing invisible spaces inside quotes.

// Data from API lookup
const product = { title: "Road Runner Shoes", price: 95 };

// ✅ FIXED: Spaces appear exactly where you type them.
// Results in: "Product: Road Runner Shoes costs $95"
const goodSpacing = `Product: ${product.title} costs $${product.price}`;

// ✅ FIXED: Spacing around the period is natural.
// Results in: "Item: Road Runner Shoes."
const correctTerminalPunctuation = `Item: ${product.title}.`;

console.log(goodSpacing);
console.log(correctTerminalPunctuation);

2. Solving Syntax Noise

By removing the constant requirement to open/close quotes and add + operators, the syntax noise is eliminated. The code reads like plain prose, allowing the developer to visually scan the final output format easily.

// Data from API lookup
const product = { id: "p101", title: "Shoes", price: 95, category: "Footwear" };

// ✅ READABLE: The prose flows naturally.
// You can quickly scan this line and understand the output.
const description = `Product: ${product.title} (ID: ${product.id}) belongs to the ${product.category} category and retails for $${product.price}.`;

console.log(description);

3. Solving Complex Interpolation

Since the ${} placeholder can evaluate any valid JavaScript expression, complex logic like arithmetic or ternary operators can be embedded directly without breaking the string flow. More importantly, it removes the need for complex parenthesis management associated with + chains.

// Data from API lookup (stockCount can be 0 or null)
const product = { title: "Shoes", price: 95, stockCount: 0 };

// ✅ EXPRESSIVE: State logic and math are cleanly contained within ${} slots.
const statusReport = `Item: ${product.title} is currently ${product.stockCount > 0 ? "In Stock" : "Out of Stock"} and costs $${(product.price * 1.08).toFixed(2)} including tax.`;

console.log(statusReport);

Function & Method Invocations

const formattedTimestamp = `Order Date: ${new Date().toLocaleDateString()}`;
// Evaluates to: "Order Date: 8/21/2026"

Whatever expression you place inside ${} is computed immediately at runtime and converted into its string representation.

In React Native apps, this is useful when constructing formatted multi-line logging entries, invoice print payloads, local push notification bodies, or SQL queries for offline persistence modules (such as SQLite or WatermelonDB).

5. Architectural Comparison: Concatenation vs. Template Literals

6. Common Pitfalls & Mistakes

Pitfall 1: Using Standard Quotes Instead of Backticks

Standard single or double quotes do not evaluate ${} placeholders; they treat the syntax as literal text:

// ❌ WRONG: Quotes treat ${productId} as literal characters
const productId = "p_101";
const url = "https://backend.ecom.subraatakumar.com/api/v1/products/${productId}"; 
console.log(url);
// Outputs: "https://backend.ecom.subraatakumar.com/api/v1/products/${productId}"

// ✅ CORRECT: Backticks activate expression evaluation
const url = `https://backend.ecom.subraatakumar.com/api/v1/products/${productId}`;
console.log(url);
// Outputs: "https://backend.ecom.subraatakumar.com/api/v1/products/p_101"

Pitfall 2: Overloading ${} with Complex Business Logic

Embedding deeply nested chains or multi-step calculations directly inside a template literal hurts code readability and makes debugging difficult:

// ❌ HARD TO READ: Complex nested reduction inside JSX template literal
<Text>{`Total: $${
  cart.items.reduce((acc, item) => acc + item.price  (item.quantity ?? 1), 0)  1.08
}`}</Text>

// ✅ CLEAN & MAINTAINABLE: Calculate first, interpolate clean variables
const rawSubtotal = cart.items.reduce((acc, item) => acc + item.price * (item.quantity ?? 1), 0);
const grandTotal = (rawSubtotal * 1.08).toFixed(2);

<Text>{`Total: $${grandTotal}`}</Text>

Pitfall 3: Using Template Literals for Static Strings

Wrapping strings that have no dynamic variables or multi-line structures in backticks adds unnecessary syntax noise:

// ❌ UNNECESSARY: No interpolation taking place
const BASE_URL = `https://backend.ecom.subraatakumar.com/api/v1`;

// ✅ CLEAN: Use standard quotes for static text
const BASE_URL = "https://backend.ecom.subraatakumar.com/api/v1";

Technical Interview Questions

Q1: What will be logged to the console by the following code snippet?

const productId = "p_404";
const price = 49.99;

console.log("Product: ${productId}, Price: $" + price);
console.log(`Product: ${productId}, Price: $${price}`);

• Output:

Product: ${productId}, Price: $49.99
Product: p_404, Price: $49.99

• Explanation: The first line uses double quotes ("), so ${productId} is parsed as raw literal text rather than an interpolation placeholder, while + price triggers standard string coercion. The second line uses backticks (```), correctly interpolating both ${productId} and ${price}.

Q2: What happens when an object is passed directly inside a template literal placeholder?

const product = { id: "p_101", title: "Wireless Headphones" };
console.log(`Selected item: ${product}`);

• Output: Selected item: [object Object]
• Explanation: Template literals convert non-primitive values using their default .toString() prototype method. For standard objects, Object.prototype.toString() produces "[object Object]". To display structured object contents, pass the specific property (${product.title}) or serialize it using ${JSON.stringify(product)}.

Q3: How do template literals handle null, undefined, and false values during string interpolation?

const discount = null;
const couponCode = undefined;
const isFreeShipping = false;

console.log(`Discount: ${discount}, Code: ${couponCode}, Free Shipping: ${isFreeShipping}`);

• Output: Discount: null, Code: undefined, Free Shipping: false
• Explanation: Unlike React JSX rendering (which ignores null, undefined, and boolean values without rendering them to the screen), JavaScript template literals coerce every primitive to its literal string equivalent ("null", "undefined", "false").

Q4: What is a Tagged Template Literal, and where is it commonly used in the React ecosystem?

• Answer: A tagged template literal is an advanced syntax that allows you to parse template literals with a custom function. The tag function receives an array of string literals along with the evaluated expressions as parameters:

function formatCurrencyTag(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    const val = values[i] !== undefined ? `$${Number(values[i]).toFixed(2)}` : "";
    return `${acc}${str}${val}`;
  }, "");
}

const price = 25;
const output = formatCurrencyTag`Item price is ${price} with tax.`;
// output: "Item price is $25.00 with tax."

In the React and React Native ecosystem, libraries like Styled Components (styled.View ...) and GraphQL (gql ...) rely on tagged template literals to parse styling rules and query documents.

Q5: Refactor the following legacy string construction into a clean, readable template literal:

function generateCartSummary(user, itemCount, grandTotal) {
  return "Customer " + user.name + " (ID: " + user.id + ") has " + 
         itemCount + " item" + (itemCount === 1 ? "" : "s") + 
         " in cart totaling $" + grandTotal.toFixed(2) + ".";
}

• Answer:

function generateCartSummary(user, itemCount, grandTotal) {
  const itemPlural = itemCount === 1 ? "item" : "items";
  const formattedTotal = grandTotal.toFixed(2);
  
  return `Customer ${user.name} (ID: ${user.id}) has ${itemCount} ${itemPlural} in cart totaling $${formattedTotal}.`;
}