Data

String

JavaScript

 

Defining String

ECMAScript 5
var str1 = "Hello World!";

var str2 = String("Hello World!");

Strings can be defined using String Literals, or by using a global String object.

String class tries to convert whatever it gets as a parameter to a string.

 

String Literals

ECMAScript 2015
var name1 = 'Sam';  // Single quoted
var name2 = "Sam";  // Double quoted
var name3 = `Sam`;  // Template

There are 3 String Literal representations:

  • Single quoted
  • Double quoted
  • Template

There is no difference between Single quoted and Double quoted Strings other than for character escaping reasons.

 

String Literal: Template

ECMAScript 2015
var normal = `Hello !`;

var multiline = `console
  .log`;

var template = 
    `${multiline}("${normal}")`;

Template String Literal has features below:

  • Template String can still be used as normal string literals.
  • Template String can contain multiline text without special escaping.
  • Template String can have placeholders for other values inside the string literal.
  • Template String can get tagged.

These are the variable values mentioned in the code example:

normal:

"Hello !"

multiline:

console
  .log

template

console
  .log("Hello !")
 

Character Escape

ECMAScript 5
var text1 = 'Sam\'s age:\t21';  // Sam's age:   21

To specify special characters or characters that make ambiguity for parsing String Literals, you need to escape them. This is a list of escaping characters:

  • \' Single quote
  • \" Double quote
  • \\ Backslash
  • \n Newline
  • \r Carriage return
  • \v Vertical tab
  • \t Tab
  • \b Backspace
  • \f Form feed
  • \xXX Latin-1 character ('\x4E' -> 'N')
  • \OOO Octal Latin-1 character ('\116' -> 'N')
  • \uXXXX Unicode character ('\u004E -> 'N')
 

String Length

ECMAScript 5
var str1 = "Hello World!";

var length = str1.length;  // 12

String length property returns the number of characters inside a string.

 

Get Character

ECMAScript 5
var str1 = "Hello World!";

var firstCh1 = str1[0];         // H
var firstCh2 = str1.charAt(0);  // H

You can get a character at any zero-based index using brackets ([]) or charAt() method.

 

Set Character

ECMAScript 5
var str1 = "Hello World!";

var str2 = str1.substr(0, 1) + '3' + str1.substr(2);
// H3llo World!

Strings are immutable in JavaScript, so you can only get a character on an index, and not setting it.

To replace a character in a string, you need to create a new string.

 

Concatenating Strings

ECMAScript 5
var str1 = "Hello";
var str2 = "World!";

var str3 = str1 + " " + str2;  // Hello World!

You can concatenate strings using the + operator.

 

Find Substring

ECMAScript 5
var str1 = "Hello World";

var index = str1.indexOf('llo');   // 2

The indexOf() method searches for the index of the first occurrence of some string inside another one.

If the substring does not exist, it returns -1.

 

Get Substring

ECMAScript 5
var str1 = "Hello World!";

var substr1 = str1.substr(6);    // World!
var substr2 = str1.substr(6, 2); // Wo
var substr3 = str1.substring(6);     // World!
var substr4 = str1.substring(6, 8);  // Wo

The substr() method gets start (inclusive) and the length of substring and returns the substring for those parameters.

The substring() method gets the starting index (inclusive) and ending index (exclusive) and returns the substring for those parameters.

For both methods, if you don't specify ending index or length of the substring, they return the substring from the starting point to the end of the string.

 

Convert to String

ECMAScript 5
var num = 12;

var str1 = String(num);  // 12

You can convert other primitive types to a string using String object.