Strings and Text
Welcome to the world of text in JavaScript! Whenever you see a welcome message on a website, a username on a screen, or an error alert, you are looking at text. In this lesson, you will learn how to write text in your code and combine words to create useful messages.
What is a String?
In programming, a piece of text is called a string. You can think of it as a string of letters, numbers, or symbols tied together in a line. A string can be as short as a single letter, or as long as an entire book.
How to Write Strings with Quotes
To tell JavaScript that a word is a string of text and not a command or piece of code, you must wrap it in quotes.
JavaScript gives you three ways to wrap your text:
- Single quotes:
'Hello' - Double quotes:
"Hello" - Backticks:
`Hello`
All three ways are valid and work perfectly for writing basic text!
Combining Strings with Variables
Often, you will want to mix normal text with a variable (a named container that holds data). For example, you might want a program to say "Hello" followed by a user's specific name.
When you want to combine text and variables easily, backticks are often the easiest choice. Backticks allow you to insert variables directly into the text using a special placeholder that looks like this: ${variableName}.
First Code Example
Here is how we create a simple personalized greeting and show it in the output section using console.log().
const firstName = "Alex";
const greeting = `Hello, ${firstName}!`;
console.log(greeting);Step-by-Step Explanation
Let's break down exactly what is happening in the code above:
const firstName = "Alex";We create a variable namedfirstNameand store the string"Alex"inside it. We used double quotes here to wrap our text.const greeting = `Hello, ${firstName}!`;We create a second variable namedgreeting. We use backticks here so we can drop thefirstNamevariable right into the middle of the text using the${}placeholder.console.log(greeting);We use theconsole.log()command to send our final message to the output section below the code. After you click Run, you should see:Hello, Alex!.
Mini Task
Try it yourself in the editable code block above.
- Change
"Alex"to your own name. - Click Run.
- Check the output below the code and watch the message update.
Short Quiz
Question: Which character is best to use when you want to easily combine text with a variable?
A) Single quotes (')
B) Double quotes (")
C) Backticks (`)
Answer: C! Backticks are special because they allow you to use the ${} placeholder to inject variables directly into your strings.
Small Challenge
Can you write a short program that prints a message about your favorite color?
- Create a variable called
favoriteColorand set it to a string (like"blue"or"green"). - Create a variable called
messageusing backticks. - Use the backticks and your variable to make the message say
"My favorite color is blue." - Print the
messagein the output section usingconsole.log().
// put your code below
console.log()Summary
- A string is the programming term for text.
- Strings must be wrapped in single quotes, double quotes, or backticks to work properly.
- Backticks are incredibly useful because they let you easily combine text and variables to build dynamic, personalized messages.
- You can use
console.log()to send your strings to the output section and see the results of your code.