JavaScript Strings

JavaScript strings are used for storing and manipulating text.
A JavaScript string is zero or more characters written inside quotes.

Example

var x = "John Doe";

You can use single or double quotes:

Example

var carname = "Volvo XC60"; // Double quotes
var carname = 'Volvo XC60'; // Single quotes

You can use quotes inside a string, as long as they don't match the quotes surrounding the string:

Example

var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

String Length

The length of a string is found in the built in property length:

Example

<html>
<body>
<h2>JavaScript String Properties</h2>
<p>The length property returns the length of a string:</p>
<p id="demo"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>
</body>
</html>

Example

JavaScript String Properties

The length property returns the length of a string:

Special Characters

Because strings must be written within quotes, JavaScript will misunderstand this string:

var x = "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


<html>
<body>
<h2>JavaScript Strings</h2>
<p>The escape sequence \" inserts a double quote in a string.</p>
<p id="demo"></p>
<script>
var x = "We are the so-called \"Vikings\" from the north.";
document.getElementById("demo").innerHTML = x; 
</script>
</body>
</html>

output

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


<html>
<body>
<h2>JavaScript Strings</h2>
<p>The escape sequence \' inserts a single quote in a string.</p>
<p id="demo"></p>
<script>

var x = 'It\'s alright.';
document.getElementById("demo").innerHTML = x; 

</script>

</body>
</html>

output

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>

var x = "The character \\ is called backslash.";
document.getElementById("demo").innerHTML = x; 

</script>

</body>
</html>

output

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


<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>

output

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


<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>

output

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


<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>

output

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


<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>

output

JavaScript Statements
You cannot break a code line with a \ backslash.

Strings Can be Objects

Normally, JavaScript strings are primitive values, created from literals:
var firstName = "John";
But strings can also be defined as objects with the keyword new:
var firstName = new String("John");

Example


<html>
<body>
<p id="demo"></p>
<script>
var x = "John";              // x is a string
var y = new String("John");  // y is an object
document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
</script>
</body>
</html>

output

string
object

Don't create strings as objects. It slows down execution speed.
The new keyword complicates the code. This can produce some unexpected results:
When using the == operator, equal strings are equal:

Example


<html>
<body>
<h2>Never Create Strings as objects.</h2>
<p>Strings and objects cannot be safely compared.</p>
<p id="demo"></p>
<script>
var x = "John";              // x is a string
var y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>

output

Never Create Strings as objects.
Strings and objects cannot be safely compared.
true

When using the === operator, equal strings are not equal, because the === operator expects equality in both type and value.

Example


<html>
<body>
<h2>Never Create Strings as objects.</h2>
<p>Strings and objects cannot be safely compared.</p>
<p id="demo"></p>
<script>
var x = "John";              // x is a string
var y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>

output

Never Create Strings as objects.
Strings and objects cannot be safely compared.
false

Or even worse. Objects cannot be compared:

Example

<html>
<body>
<h2>Never Create Strings as objects.</h2>
<p>JavaScript objects cannot be compared.</p>
<p id="demo"></p>
<script>
var x = new String("John");  // x is an object
var y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>

output

Never Create Strings as objects.
JavaScript objects cannot be compared.
false

« Previous Next »