JavaScript Strings
JavaScript strings help store and handle text.
Using Quotes
A JavaScript string is a bunch of letters or symbols that you put inside quotation marks.
You can use single or double quotes:
Quotes Inside Quotes
You can include quotation marks within a text, as long as they differ from the quotation marks enclosing the text.
String Length
To determine the size of a text, utilize the included length property:
Escape Character
JavaScript gets confused when it encounters a string that isn't enclosed in quotation marks. Here's an example:
let text = "We are the so-called "Vikings" from the north.";
The string will be chopped to We are the so-called .
To prevent this issue, you can use a special character called the backslash escape character.
The backslash (\) escape character changes special characters into regular characters in a string.
| Code |
Result |
Description |
| \' |
' |
Single quote |
| \" |
" |
Double quote |
| \\ |
\ |
Backslash |
The code \" adds a double quote to a string.
The sequence \' inserts a single quote in a string:
The sequence \\ inserts a backslash in a string:
JavaScript allows for six different escape sequences to be used:
| Code |
Result |
| \b |
Backspace |
| \f |
Form Feed |
| \n |
New Line |
| \r |
Carriage Return |
| \t |
Horizontal Tabulator |
| \v |
Vertical Tabulator |
The six escape characters mentioned were initially made to operate typewriters, teletypes, and fax machines. However, they aren't relevant in HTML.
Breaking Long Code Lines
To make code easy to read, programmers usually prefer to keep lines of code shorter than 80 characters.
If a JavaScript command is too long to fit on one line, it's a good idea to split it into two lines, and the best spot to do that is right after an operator.
A good way to split a string is by adding strings together.
Template Strings
Templates came out with ES6 (JavaScript 2016).
Templates are words or phrases surrounded by backticks, like this: (`This is a template string`).
Templates make it possible to write multiple lines of text together.
JavaScript Strings as Objects
Usually, JavaScript strings are basic values made from literals:
But strings can also be defined as objects with the keyword new:
let y = new String("John");
Do not create Strings objects.
The use of the new keyword can make code more complex and slow down execution.
String objects can produce unexpected results:
Note : the difference between (x==y) and (x===y).
Comparing two JavaScript objects always returns false.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<p id="demo"></p>
<script>
let text = "John Doe"; // String written inside quotes
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<p>Texts are put inside quotes. You can pick either 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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<p>You're allowed to put quotation marks inside a sentence, but they must be different from the ones enclosing the sentence.</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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The length Property</h2>
<p>The length of the string is:</p>
<p id="demo"></p>
<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<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>
<!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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<p>The safest method to split a line of code within a string is by using string addition.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello " + "Dolly!";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Template Strings</h1>
<p>Templates allow multiline strings:</p>
<p id="demo"></p>
<p>Templates are not supported in Internet Explorer.</p>
<script>
let text = `The quick
brown fox
jumps over
the lazy dog`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<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>
<!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>
<!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>
<!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>
<!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>
HTML
CSS
Javascript
Jquery