String

JavaScript have the string data type to store the string and character. The string is one of the most used data type in the JavaScript.

Many programming languages like C# and Java have the two different data type that is char for store single character and string for store string or sequence of the character. But JavaScript has only string, no char.

Another feature is that internally all string are Unicode, no matter which encoding is used.

Declaration

We can declare or create the string using the single quote (‘) or double quote (“”). Because there is no difference between single and double quote in the JavaScript.

var string1 = "Hello World!!!";
var Website = 'JavaScript Hive';
var numbers = '789456123';

Special characters

String literals have special characters denoted by escape-sequences:

\n	New Line
\t	Tab
\f	Form feed
\b	Backspace
\r	Carriage return
\uNNNN	The unicode character which code is given by the four hexadecimal digits NNNN.

Example:

var string1 = "Hello World \n Welcome to the JavaScript Hive";
alert(string1);

//Hello World
//Welcome to the JavaScript Hive

In above example one popup will be display with the above message in two line.

Escaping special character

In JavaScript we can Escape the special character by pre-pending a backslash(\) character.

If we want to put the double quote inside the double quote string than we need to escape that double quote by pre-pending the backslash.

var string1 = "This is the \" double quote";
alert(string1);

//This is the " double quote

In above example we escape the double quote. So now when popup is displayed, backslash(\) will be removed and display the message with the double quote (“).

If we put that same string inside the single quote so there will be no need to escape the double quote.

var string1 = 'This is the " double quote';
alert(string1);

//This is the " double quote

As you seen in above example I put the whole string inside the single quote(‘) and I does not put backslash before the double quote.

This same thing will be happen with the single quote also, If we want to put the single quote inside the single quote string than we need to escape that single character.

var string1 = 'This is the \' single quote';
alert(string1);

//This is the ' single quote

And If we put that string inside the double quote so there is no need of the escape the single quote(‘).

var string1 = "This is the ' single quote";
alert(string1);

//This is the ' single quote

One more:

var string1 = "This is the \\ backslash";
alert(string1);

\\ This is the \ backslash

In string backslash needs every time to escape. So, yes we can do the same thing, we just have to pre-pending the backslash to the backslash, It means we need two write two time backslash to display it only time in string.

Properties and Methods

JavaScript’s String object provides the multiple properties and methods for the string manipulation.

Length

Every string has the length property, that help us to find the length of the string.

var string = "JavaScript Hive";
alert(string.length); // 15

In above example, one popup will be displayed with the “15”, In length white space is also counted.

var string1 = "Name\n";
alert(string1.length) //5

In above example, One popup will be displayed with the “5”, Yes there is only 4 characters “Name”, But there is also “\n” that indicates new line and it also counted in the length.

Accessing Characters

Form string we can access the single character using the charAt() method.

String’s index is start with the 0 (Zero) to string’s length – 1.

var string = "JavaScript";
alert(string.charAt(0)); // J
alert(string.charAt(string.length - 1)); // t

In “JavaScript” string, at the index of 0 (Zero) the ‘J’ character is there and at the index of the string.length – 1 the “t” character is there. So the two alert popup will be displayed with the “J” and “t” respectively.

Note: There is no character type in the JavaScript. So charAt() method will return the string with the single character only. Actually charAt() method return the sub-string of the string.

Manipulating string

JavaScript can not allow string to modify it self. In simple language string can not be modify. We can write, we can read the string but we can not replace the string.

So each and every method of the JavaScript’s string object will return the new string.

var string = "JavaScript";
alert(string); // JavaScript

string = string.charAt(0);
alert(string); // J

As you seen in above example, the charAt() method will return the new string, and we assign that string to the old variable called the string. So it old value be overwritten with the new string.

Lower Case – toLowerCase()

JavaScript also provide us the ready made function to convert the whole string into the lower case. Yes it was so easy.

JavaScript have the toLowerCase() method to convert the string to the lower case.

var string = "JavaScript";
var lowerString = string.toLowerCase();
alert(lowerString); // javascript

Upper Case – toUpperCase()

JavaScript also provides the ready made function to convert the whole string into the upper case.

It have the method called toUpperCase().

var string = "JavaScript";
var lowerString = string.toUpperCase();
alert(lowerString); // JAVASCRIPT

Finding sub-string in the string

JavaScript provides the indexOf method to the find the sub-string string in the string.

indexOf method will return the index of the sub-string in the string if the string is found, otherwise it will return the -1.

var string = "JavaScript Hive";

var index = string.indexOf("Hive");

alert(index); // 11

if (index > -1) {
    alert("String was found at the " + index + " index in the string");
} else {
    alert("Substring 'Hive' does not found!!!");
}

// String was found at the 11 index in the string

In above example sub-string “Hive” found at the 11th index.

var string = "JavaScript Hive";

var index = string.indexOf("AAA");

alert(index); // -1

if (index > -1) {
    alert("String was found at the " + index + " index in the string");
} else {
    alert("Substring 'AAA' does not found!!!");
}

// Substring 'AAA' does not found!!!

For more about the indexOf, Please click here to study more.

Extracting a substring using substring, slice and substr

substring(StartIndex, [ EndIndex])

substring() method has the two arguments that is start index and end index, substring() will return the new string from the start index character, but not including the end index character.

StartIndex  : It describes the starting index for the sub-string.
EndIndex : It describes the ending index for the sub-string. But sub-string does not contain the EndIndex character in string. It always return till the EndIndex – 1. If EndIndex is omitted than it return the character from the start index to the end of the string.

var string = "JavaScript Hive";
alert(string.substring(0, 3));

// Jav

If we omitted the second argument than substring() will return the string from the start index character to the end of the string.

var string = "JavaScript Hive";
alert(string.substring(3));

// aScript Hive

Note: substring() method does not return the character of the last index but it will return the character from the start index.

// JavaScript Hive
// 012345678901234

var string = "JavaScript Hive";

alert(string.substring(0, 3)); // Jav

alert(string.substring(3, 6)); // aSc

In first substring() I passed the 0 as the start index and 3 as the end index. So It should be return the “Java” but It return the “Jav” because the substring() does not include the last index into the sub-string.

substr(StartIndex, [length])

substr() is little bit different than the substring(), substr() also have the two argument.

StartIndex : Starting index of sub-string in the string.
length (Optional) : It Describes how many character will be extracted from the string. If we omitted this argument than it will return the string from the start index to the end of the index.

var string = "JavaScript Hive";

alert(string.substr(0, 3)); // Jav

alert(string.substring(3)); // aScript Hive

slice(StartIndex, [EndIndex])

Returns the part of the string from the StartIndex position to, but not including the EndIndex position, Same as the substring().

var string = "JavaScript Hive";

alert(string.slice(8, 12)); // pt H

alert(string.substring(8)); // pt Hive

substring() vs slice()

substring()

• If we passed the negative value to the substring() than it will convert that number to the ZERO.
• If we passed the value greater than the string length than it will convert that number to the length of the string.

var str = "JavaScript";

alert(str.length); // 10

alert(str.substring(-1, 11));
// Here I passed the -1 negative value so substring() function
// convert that number to the 0.
// I also passed the end argument 11, which is greater than 
// the length of the string so substring() convert that number
// to the length of the string.

slice()

• If we passed the negative value to slice() than it will go backwards from the tail. It means when we passed the negative value than it go the tail of the string and start the sub-string to the backwards direction.

var str = "JavaScript";

alert(str.slice(3, -3)); //aScr

alert(str.slice(-6)); // Script

In first slice() I passed the StartIndex 3 so it will start the sub-string from the start of the string and I passed the second argument -3, So it will be stop at the 3rd index from the tail of the string.

In second slice() I passed the only one argument as the -6 so it will start the sub-string from the 6th index from the tail of the string.

Concatenation

In JavaScript plus (+) sign is used to the concatenation of the two or more strings.

var str1 = "JavaScript";
var str2 = "Hive";

alert(str1 + " " + str2); // JavaScript Hive