JavaScript Strings

Javascript Course

• Using String Methods
• Adding quotes and special characters in string
• Template string

First must know what objects are in programming and the fundamental concepts of the object-oriented programming (OOP), because the string is recognized as an object in JavaScript.
JavaScript isn't a object-oriented (OO), such as C++ or Java, but is based on objects.
In the world around us the objects are, for example: a book, a car, a television ..., In JavaScript the object s are, for example: a form, a window, buttons, images, strings ...
JavaScript sees all elements of a page as objects.
An object is a collection of values called properties.
When a property is function, it’s referred to as a method.

The String object

There is various ways to create a string: using the new keyword or with the literal form, surrounding characters with either single quotes (') or double quotes (").

var instance_name = new String('string value here'); // using the 'new' keyword

// Literal form
var variable_name1 = "some text: coursesweb.net"; // with double quotes
// or
var variable_name1 = 'some text: coursesweb.net'; // with single quotes

- The most indicated way is the literal form (with quotes).
But whichever quote you use (single or double), you can’t use it again in the middle of the string because that will end the string early.
However, you can escape any character with a backslash (\) to solve this or use single quote inside double quotes (and vice versa).

<script>
// Incorrect
var a_name = 'CoursesWeb.net 'JS lesson''; // SyntaxError: missing ; before statement

// Correct
var a_name = "CoursesWeb.net \"JS lesson\"";
// or
var a_name = 'CoursesWeb.net "JS lesson"';
// or
var a_name = "CoursesWeb.net 'JS lesson'";
--></script>

Strings have one built-in property, length - returns the number of characters in a string.

let str ='Tutorial JS';
let nr_chr = str.length; // 11

You can read in JS any character from a string using the index number. The first character has index 0 (str[0]), the second character has index 1 (str[1]), and so on.
- Example, displays in a Div the number of characters of a string and the third character (index 2).

Using String Methods

The String object contains many methods that can be useful in working with strings in JavaScript. A list of methods for strings can be found on the page: Methods of the String object in JS
- Here is a few examples with some of the string object methods.

Example with indexOf()

The indexOf() method is useful when you want to check if a string contains a specified substring.
The str.indexOf(s2) returns the position of the first occurrence of the substring 's2' in 'str', or -1, if the substring is not found.

Example with match()

The match() method is useful to compare a string with a regular expression (RegExp). It returns an array with the matches or 'null'.
- Example, check if a string is a valid email address and gets the name from the address.

Chaining methods

You can apply several chained methods to an object. - Example with replace() and trim().

The str.replace(s0, s2) method replaces in 'str' the matched substring 's0' with the value from 's2'.
The str.trim() method trims whitespace from the beginning and end of the string.

In the following example, the characters '<' and '>' are replaced in a HTML string with their HTML entities, and the resulting string is added into a Div.

Adding quotes and special characters in string

When you want to add quotes into a string you must take in consideration the quotes used to define the string.
Double quotes can be added normally in a string defined with simple quotes (and vice versa).
- Syntax:

var str ='A text with "double" quotes';

var str ="A text with 'simple' quotes";

The same type of quotation marks as those used to define the string can be added by escaping (preceded by '\').
- Syntax:

var str ='A text with \'simple quotes\' as those that define this string.';

var str ="Another text with \"double quotes\", as those that define this string.";

Besides quotes, there are other special characters that must be escaped when are added in string.
Here's a list of these characters:

• \0 - the NULL character.
• \' - simple quote (in string enclosed by simple quotes).
• \" - double quotes (in string enclosed by double quotes).
• \\ - backslash.
• \n - new line.
• \r - carriage return.
• \v - vertical tab.
• \t - tab space.
• \b - backspace.
• \uXXXX - unicode.

- Example, adding in a <pre> a string with multiple line, and contains quotes and backslash.

Template string

The Template string is added between the accent characters ( `...` ).
This type of String allows to create strings with new lines without '\n' and can contain variables and JS expressions that will be executed directly in that string.
- Syntax:

var tmp =`string text line 1
 Line 2 and ${js_expression} JS expression.`;

- js_expression can be a JavaScript variable, call of a function or JS expression with values. These are added between: ${} and are executed like any JavaScript code.

Example, a string with multiple lines and html code with dynamic content.

Inside a template string you can add the accent character escaped with backslash (\`).

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net