JavaScript strings are for storing and manipulating text.
A JavaScript string is zero or more characters written inside quotes.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p id="demo"></p>
<script>
let text = "John Doe"; // String written inside quotes
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Result:
JavaScript Strings
John Doe
You can use single or double quotes:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Strings are written inside quotes. You can use single or double quotes:</p>
<p id="demo"></p>
<script>
let carName1 = "Volvo XC60"; // Double quotes
let carName2 = 'Volvo XC60'; // Single quotes
document.getElementById("demo").innerHTML =
carName1 + " " + carName2;
</script>
</body>
</html>
Result:
JavaScript Strings
Strings are written inside quotes. You can use single or double quotes:
Volvo XC60 Volvo XC60
You can use quotes inside a string, as long as they don’t match the quotes surrounding the string:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>You can use quotes inside a string, as long as they don't match the quotes surrounding the string.</p>
<p id="demo"></p>
<script>
let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"';
document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3;
</script>
</body>
</html>
Result:
JavaScript Strings
You can use quotes inside a string, as long as they don’t match the quotes surrounding the string.
It’s alright
He is called ‘Johnny’
He is called “Johnny”
String Length
To find the length of a string, use the built-in length property:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Properties</h2>
<p>The length property returns the length of a string:</p>
<p id="demo"></p>
<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>
</body>
</html>
Result:
JavaScript String Properties
The length property returns the length of a string:
26
Escape Character
Because strings must be written within quotes, JavaScript will misunderstand this string:let text = “We are the so-called “Vikings” from the north.”;
The string will be chopped to “We are the so-called “.
The solution to avoid this problem, is to use the backslash escape character.
The backslash (\) escape character turns special characters into string characters:
| Code | Result | Description |
|---|---|---|
| \’ | ‘ | Single quote |
| \” | “ | Double quote |
| \\ | \ | Backslash |
The sequence \" inserts a double quote in a string:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>The escape sequence \" inserts a double quote in a string.</p>
<p id="demo"></p>
<script>
let text = "We are the so-called \"Vikings\" from the north.";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Result:
JavaScript Strings
The escape sequence \” inserts a double quote in a string.
We are the so-called “Vikings” from the north.
The sequence \' inserts a single quote in a string:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>The escape sequence \' inserts a single quote in a string.</p>
<p id="demo"></p>
<script>
let text = 'It\'s alright.';
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Result:
JavaScript Strings
The escape sequence \’ inserts a single quote in a string.
It’s alright.
The sequence \\ inserts a backslash in a string:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>The escape sequence \\ inserts a backslash in a string.</p>
<p id="demo"></p>
<script>
let text = "The character \\ is called backslash.";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Result:
JavaScript Strings
The escape sequence \\ inserts a backslash in a string.
The character \ is called backslash.
Six other escape sequences are valid in JavaScript:
| Code | Result |
|---|---|
| \b | Backspace |
| \f | Form Feed |
| \n | New Line |
| \r | Carriage Return |
| \t | Horizontal Tabulator |
| \v | Vertical Tabulator |
The 6 escape characters above were originally designed to control typewriters, teletypes, and fax machines. They do not make any sense in HTML.
Breaking Long Code Lines
For best readability, programmers often like to avoid code lines longer than 80 characters.
If a JavaScript statement does not fit on one line, the best place to break it is after an operator:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>
The best place to break a code line is after an operator or a comma.
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>
</body>
</html>
Result:
JavaScript Statements
The best place to break a code line is after an operator or a comma.
Hello Dolly!
You can also break up a code line within a text string with a single backslash:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>
You can break a code line within a text string with a backslash.
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>
</body>
</html>
Result:
JavaScript Strings
You can break a code line within a text string with a backslash.
Hello Dolly!
The \ method is not the preferred method. It might not have universal support.
Some browsers do not allow spaces behind the \ character.
A safer way to break up a string, is to use string addition:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>The safest way to break a code line in a string is using string addition.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>
</body>
</html>
Result:
JavaScript Strings
The safest way to break a code line in a string is using string addition.
Hello Dolly!
You cannot break up a code line with a backslash:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p id="demo">You cannot break a code line with a \ backslash.</p>
<script>
document.getElementById("demo").innerHTML = \
"Hello Dolly.";
</script>
</body>
</html>
Result:
JavaScript Statements
You cannot break a code line with a \ backslash.
JavaScript Strings as Objects
Normally, JavaScript strings are primitive values, created from literals:let x = “John”;
But strings can also be defined as objects with the keyword new:let y = new String(“John”);
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p id="demo"></p>
<script>
// x is a string
let x = "John";
// y is an object
let y = new String("John");
document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
</script>
</body>
</html>
Result:
JavaScript Strings
string
object
Do not create Strings objects.
The new keyword complicates the code and slows down execution speed.
String objects can produce unexpected results:
When using the == operator, x and y are equal:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Never Create Strings as Objects</h2>
<p>Strings and objects cannot be safely compared.</p>
<p id="demo"></p>
<script>
let x = "John"; // x is a string
let y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>
Result:
Never Create Strings as Objects
Strings and objects cannot be safely compared.
true
When using the === operator, x and y are not equal:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Never Create Strings as Objects</h2>
<p>Strings and objects cannot be safely compared.</p>
<p id="demo"></p>
<script>
let x = "John"; // x is a string
let y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>
Result:
Never Create Strings as Objects
Strings and objects cannot be safely compared.
false
Note the difference between (x==y) and (x===y).
(x == y) true or false?
Example
<!DOCTYPE html>
<html>
<body>
<h2>Never Create Strings as Objects</h2>
<p>JavaScript objects cannot be compared.</p>
<p id="demo"></p>
<script>
let x = new String("John"); // x is an object
let y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>
Result:
Never Create Strings as Objects
JavaScript objects cannot be compared.
false
(x === y) true or false?
Example
<!DOCTYPE html>
<html>
<body>
<h2>Never Create Strings as Objects</h2>
<p>JavaScript objects cannot be compared.</p>
<p id="demo"></p>
<script>
let x = new String("John"); // x is an object
let y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>
Result:
Never Create Strings as Objects
JavaScript objects cannot be compared.
false