Topic 5318 min readStructured Tutorial

JavaScript String Formatting

Quick Answer

String formatting in JavaScript is primarily done using template literals, string concatenation, and built-in methods like padStart and padEnd. These techniques allow developers to create dynamic, readable, and well-structured strings efficiently.

Learning Objectives

Explain the purpose of String Formatting in a practical learning context.
Identify the main ideas, terms, and decisions involved in String Formatting.
Apply String Formatting in a simple real-world scenario or practice task.

Introduction to JavaScript String Formatting

Formatting strings is a fundamental skill in JavaScript programming. It helps in creating readable and dynamic text outputs.

This tutorial covers the main ways to format strings, including template literals, concatenation, and useful string methods.

Good code is its own best documentation.

Using Template Literals

Template literals are a modern and powerful way to format strings in JavaScript. They use backticks (`) and allow embedding expressions directly.

They improve readability and reduce errors compared to traditional concatenation.

Use backticks (`) to define template literals.
Embed variables and expressions inside ${} placeholders.
Support multi-line strings without special characters.

Example of Template Literals

Here is a simple example demonstrating template literals with variables.

String Concatenation

Before template literals, string concatenation was the primary way to format strings.

It uses the + operator to join strings and variables.

Concatenate strings and variables using +.
Can become hard to read with many variables.
Requires manual spacing and formatting.

Example of String Concatenation

This example shows how to concatenate strings and variables.

Useful String Methods for Formatting

JavaScript provides several string methods that help with formatting, such as padding and trimming.

These methods improve the presentation of strings in user interfaces or logs.

padStart(targetLength, padString): Pads the start of a string.
padEnd(targetLength, padString): Pads the end of a string.
trim(): Removes whitespace from both ends of a string.

Example Using padStart and padEnd

This example demonstrates how to align numbers or text by padding.

Practical Example

This example uses template literals to embed variables directly into a string.

This example concatenates strings and variables using the + operator.

This example shows how to pad strings to a fixed length using padStart and padEnd.

Examples

Template Literals Example

const name = 'Alice';
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);

This example uses template literals to embed variables directly into a string.

String Concatenation Example

const name = 'Alice';
const age = 30;
const greeting = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';
console.log(greeting);

This example concatenates strings and variables using the + operator.

Padding Example

const number = '5';
console.log(number.padStart(3, '0')); // Output: '005'
console.log(number.padEnd(3, '*'));   // Output: '5**'

This example shows how to pad strings to a fixed length using padStart and padEnd.

Best Practices

Prefer template literals for readability and maintainability.
Use string methods like padStart and padEnd for alignment and formatting.
Avoid excessive string concatenation to keep code clean.
Use descriptive variable names inside template literals for clarity.

Common Mistakes

Forgetting to use backticks for template literals.
Not adding spaces when concatenating strings manually.
Using concatenation in complex strings leading to hard-to-read code.
Ignoring built-in string methods that simplify formatting.

Hands-on Exercise

Create a Formatted Greeting

Write a function that takes a name and age and returns a formatted greeting using template literals.

Expected output: Hello, my name is John and I am 25 years old.

Hint: Use backticks and ${} to embed variables.

Pad Numbers with Leading Zeros

Write code to pad a number string with leading zeros to ensure it is 5 characters long.

Expected output: '00042' for input '42'

Hint: Use padStart method.

Interview Questions

What are template literals in JavaScript?

Interview

Template literals are string literals enclosed by backticks (`) that allow embedded expressions and multi-line strings, making string formatting easier and more readable.

How does padStart() method work?

Interview

The padStart() method pads the current string from the start with another string until the resulting string reaches the given length.

What is String Formatting, and why is it useful?

Beginner

String formatting in JavaScript is primarily done using template literals, string concatenation, and built-in methods like padStart and padEnd.