Fynd Academy

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

You can use single or double quotes:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<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>

Note:

Strings can be created using either single or double quotes, and they function identically. There is no difference in how they are handled.

Quotes Inside Quotes

You can include quotes within a string, provided they are different from the quotes that enclose the string itself:

Example:

let answer1 = "It's alright"; uses double quotes to enclose a string containing a single quote.
let answer2 = "He is called 'Johnny'"; and let answer3 = 'He is called "Johnny"'; demonstrate how to embed quotes of one type within a string enclosed by the other type.

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<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>

Template Strings

Templates, introduced in ES6 (JavaScript 2016), are a type of string that uses backticks (`) for delimitation. Known as template literals, they offer enhanced functionality over regular strings.

‍

Example

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Template Strings</h1>
<p>With back-ticks, you can use both single and double quotes inside a string:</p>

<p id="demo"></p>

<p>Templates not supported in Internet Explorer.</p>

<script>
let text = `He's often called "Johnny"`;
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Example

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Template Strings</h1>
<p>With back-ticks, you can use both single and double quotes inside a string:</p>

<p id="demo"></p>

<p>Templates not supported in Internet Explorer.</p>

<script>
let text = `He's often called "Johnny"`;
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Note: Template literals, introduced in ES6, are not supported in Internet Explorer.

‍

String Length

‍

To determine the length of a string in JavaScript, you can use the built-in length property. This property counts the number of characters in the string, including spaces and special characters. For example:

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

Escape Characters

‍

Because strings in JavaScript need to be enclosed in quotes, the interpreter can become confused if quotes are used within the string improperly, as seen in this incorrect example:

let text = "We are the so-called "Vikings" from the north.";

This line would result in a syntax error because JavaScript interprets the second quote as the end of the string, truncating the intended text at "We are the so-called ".

To address this issue, you can use the backslash (\) escape character, which allows special characters to be included in string literals:

let text = "We are the so-called \"Vikings\" from the north.";

Examples

\" inserts a double quote in a string:

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

\' inserts a single quote in a string:

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

\\ inserts a backslash in a string:

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

Here are the six valid escape sequences in JavaScript, each providing a way to include special whitespace characters in strings:

\b: Backspace
\f: Form Feed
\n: New Line
\r: Carriage Return
\t: Horizontal Tab
\v: Vertical Tab

These escape sequences allow you to insert control characters into JavaScript strings, which can be especially useful for formatting output or structuring text in a specific way.

‍

Note: The six escape characters mentioned were originally designed for use with typewriters, teletypes, and fax machines.

‍

Breaking Long Lines

For enhanced readability, programmers frequently prefer to break up long lines of code. A safe and common practice is to split a line after an operator. This approach helps to maintain clear and understandable code, ensuring that the continuation of expressions across lines does not lead to syntax errors or confusion.

‍

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>

A safe way to break up a string is by using string addition:

‍

Example:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

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

Template Strings

‍

Templates, which were introduced with ES6 (JavaScript 2016), are strings enclosed in backticks (This is a template string). They allow for multiline strings.

Example

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

Note

Templates are not supported in Internet Explorer.

‍

JavaScript Strings as Objects

‍

Typically, JavaScript strings are primitive values created from literals, like so:

let x = "John";

However, strings can also be instantiated as objects using the new keyword, as demonstrated below:

let y = new String("John");
```"

Example

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

Avoid creating String objects as they can complicate your code and slow down execution speed. Additionally, String objects may yield unexpected results. For instance, when using the == operator, x and y are considered equal:

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

When using the === operator, x and y are not equal:

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

Note the difference between (x==y) and (x===y).

‍

(x == y) true or false?

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

(x === y) true or false?

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

When comparing two JavaScript objects using the == or === operators, the result is generally false unless they refer to the same object instance. Each object in JavaScript is a reference type, and when you use the equality operators on objects, they compare references, not the content of the objects.

‍

Complete String Reference

‍

For comprehensive information on Strings, visit our:

JavaScript String Reference.

This reference offers detailed explanations and examples of all string properties and methods available.

‍

Take a look into your desired course

Students

Hire from us

Partners