JS Strings & Variables Explained

JavaScript is the language of the web. Two core concepts you must know are strings and variables. They work together to store and manage text.

This guide explains everything clearly. You will learn how to create, use, and combine strings with variables. We keep it short and practical.

What Is a Variable in JavaScript?

A variable is a container for data. Think of it as a labeled box. You put a value inside, and you can use the label to get it back later.

JavaScript uses three keywords to declare variables: let, const, and var. The modern way is let and const.

For a deeper look at declaring variables, read our JavaScript Variable Declaration Guide.

 
// Declare a variable with let
let userName = "Alice";

// Declare a constant (value cannot change)
const siteName = "My Blog";

What Is a String in JavaScript?

A string is a sequence of characters. It holds text like words, sentences, or numbers treated as text.

You write strings inside quotes. JavaScript accepts three types of quotes:

• Single quotes: 'Hello'
• Double quotes: "Hello"
• Backticks: `Hello` (template literals)

Backticks are special. They let you embed variables directly inside the string.

 
// Three ways to write a string
let str1 = 'Single quotes';
let str2 = "Double quotes";
let str3 = `Backticks`; // Template literal

Storing Strings in Variables

The most common use of variables is to store strings. You assign a string value to a variable name.

Once stored, you can reuse the variable anywhere in your code.

 
// Store a string in a variable
let greeting = "Hello, world!";

// Use the variable
console.log(greeting); // Output: Hello, world!

Hello, world!

String Concatenation: Joining Text

You often need to combine strings. This is called concatenation. The old way uses the + operator. The new way uses template literals.

Template literals are cleaner and easier to read. Use backticks and ${} to insert variables.

 
// Old way: concatenation with +
let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName); // Output: John Doe

// New way: template literal
let fullName2 = `${firstName} ${lastName}`;
console.log(fullName2); // Output: John Doe

John Doe
John Doe

Common String Methods

JavaScript provides built-in methods to manipulate strings. Here are the most useful ones for beginners.

length Property

Find out how many characters a string has.

 
let text = "JavaScript";
console.log(text.length); // Output: 10

10

toUpperCase() and toLowerCase()

Change the case of a string.

 
let message = "Hello World";
console.log(message.toUpperCase()); // Output: HELLO WORLD
console.log(message.toLowerCase()); // Output: hello world

HELLO WORLD
hello world

includes() Method

Check if a string contains a specific word or character.

 
let sentence = "The quick brown fox";
console.log(sentence.includes("fox")); // Output: true
console.log(sentence.includes("cat")); // Output: false

true
false

String Interpolation with Variables

Template literals make dynamic strings easy. You can insert variables, expressions, and even function calls.

This is called string interpolation. It replaces ${expression} with its value.

 
let product = "laptop";
let price = 999;
let discount = 0.1;

// Interpolation with expression
let summary = `The ${product} costs $${price - (price * discount)}.`;
console.log(summary); // Output: The laptop costs $899.1.

The laptop costs $899.1.

Variable Types and Strings

Strings are one of several data types in JavaScript. Others include numbers, booleans, and objects.

When you assign a string to a variable, that variable becomes a string type. You can check the type with the typeof operator.

Understanding data types is crucial. See our JavaScript Variable Types Guide for more details.

 
let myString = "Hello";
let myNumber = 42;

console.log(typeof myString); // Output: string
console.log(typeof myNumber); // Output: number

string
number

Best Practices for Variables and Strings

Follow these simple rules to write clean code.

• Use const by default. Only use let when you need to reassign.
• Use descriptive variable names. userEmail is better than u.
• Always use template literals for combining strings and variables.
• Avoid using var. It has scoping issues.

For a complete overview of variable rules, check our JavaScript Variables Guide.

 
// Good practice
const userName = "Bob";
const greetingMessage = `Welcome, ${userName}!`;

// Bad practice
var n = "Bob";
var g = "Welcome, " + n + "!";

Common Mistakes to Avoid

Beginners often make these errors. Learn them now to save time later.

• Forgetting quotes:let name = Bob; will throw an error. Always wrap text in quotes.
• Mixing quote types:let text = "It's ok'; is wrong. Stay consistent.
• Using undeclared variables: Always use let or const.

 
// Wrong: missing quotes
// let city = Paris;

// Correct
let city = "Paris";

// Wrong: mismatched quotes
// let phrase = 'Hello";

// Correct
let phrase = 'Hello';

Conclusion

Strings and variables are the building blocks of JavaScript. You now know how to declare variables, create strings, and combine them effectively.

Practice with small examples. Try storing your name in a variable and printing a greeting. The more you code, the easier it becomes.

Remember these key points: use backticks for interpolation, choose const over let when possible, and always wrap text in quotes. Happy coding!