« Previous
Next »
JavaScript Strings
JavaScript strings are used for storing and manipulating text.
A JavaScript string is zero or more characters written inside quotes.
Example
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
<!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>
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:
26 |
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
<!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>
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
<!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>
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
<!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>
|
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
<!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>
|
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
<!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>
|
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
<!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>
|
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
<!DOCTYPE html>
<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
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
<!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>
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
<!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>
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
<!DOCTYPE html>
<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 »