Loading...

JavaScript Strings

You already know a value can be a string. This session stays on that type: how to write text in quotes, count characters, join pieces, put a quote inside a string, and show a message on the page. Deeper tools like slice and toUpperCase come in the next session.

How do strings work in JavaScript?

A string is text the engine treats as one value. You write it inside single quotes, double quotes, or backticks (`). "Hello" and 'Hello' are both strings; 42 without quotes is a number. The length property tells you how many characters the string has (including spaces). Use + to join strings, or build a line with a template literal and ${…} placeholders. A backslash (\) lets you include a quote of the same kind inside the string. When users should see the text, put it on the page with textContent.

String toolkit

📊 Everyday string tools beginners use first

Idea Example Result / note
Double quotes let s = "Hi"; Type string
Single quotes let s = 'Hi'; Same type string
length "Hi".length 2 (characters)
Join with + "Hi" + "!" "Hi!"
Escape "Say \"hi\"" Quote inside same quotes
Template ` Hi, ${name} ` Inserts the value of name

Write text in quotes

Pick a quote style and close with the same kind. Empty quotes "" are a valid empty string.

Single and double quote strings

javascript 
let greeting = "Hello";
let city = 'Tehran';
console.log(greeting);
console.log(city);
console.log(typeof greeting);

Count characters with length

length is a property, not a function — write .length, not .length(). Spaces count as characters.

String length

javascript 
let word = "JavaScript";
console.log(word.length);
console.log("Hi there".length);

Join strings with +

The + operator glues text together. If one side is a string, JavaScript often turns the other side into text too — so "Score: " + 10 becomes "Score: 10". Keep that in mind when mixing numbers and text.

Concatenate with +

javascript 
let first = "Ada";
let last = "Lovelace";
let full = first + " " + last;
console.log(full);
console.log("Score: " + 10);

Put a quote inside the string

Two easy options: wrap with the other quote style, or escape with a backslash.

Quotes inside a string

javascript 
let a = "She said \"hello\"";
let b = 'It\'s ready';
console.log(a);
console.log(b);

Template literals (backticks)

Backticks let you write a string and drop values in with ${…}. Handy for messages that mix words and variables.

Template literal with a placeholder

javascript 
let name = "Sam";
let line = `Hello, ${name}!`;
console.log(line);

Show a string on the page

Build a message, then assign it with textContent so the paragraph shows plain text.

Page shows a greeting string

html 
<!DOCTYPE html>
<html>
<head>
<title>Strings — greeting on page</title>
</head>
<body>
<p id="out">…</p>
<script>
let user = "guest";
let msg = `Welcome, ${user}!`;
document.getElementById("out").textContent = msg;
</script>
</body>
</html>

The paragraph shows the greeting. Change user, refresh, and confirm the line updates.

Try it yourself

  1. Create one let with double quotes and one with single quotes; log both and typeof.
  2. Log .length for "JavaScript" and for a short phrase with a space.
  3. Join first and last name with + and a space; log the result.
  4. Write a string that contains an apostrophe or a double quote (escape or switch quote style).
  5. Build `Hello, ${name}!` with a let name and log it.
  6. In the HTML demo, change only user, refresh, and read the new greeting.

Common mistakes

  • Writing let s = Hello; without quotes — that looks for a variable named Hello
  • Opening with " and closing with ' (or the reverse)
  • Calling length() as if it were a function — use .length
  • Expecting "5" + 5 to always mean number math — with a string, + often concatenates
  • Jumping into many string methods before this session’s basics are solid (they come next)

Summary

  • Strings are text in '…', "…", or `…`
  • length counts characters; it is a property
  • Join with +, or use template literals with ${…}
  • Escape same-style quotes with \, or switch quote style
  • Next: String Methods — tools like slice, replace, and case changes

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 10 of 13
Javascript Tutorial