Skip to main content

JavaScript Strings

String can be pair of single or multiple alphabetic characters,symbols and unicode characters. Character is smallest unit of string text and combination of characters is represent a words.

JavaScript string literals
var text = "Regular Codes";
//string literal character are accessed like an array
console.log(text[0]);
console.log(text[1]);
console.log(text[2]);
console.log(text[3]);
console.log(text[4]);
console.log(text[5]);
console.log(text[6]);
R
e
g
u
l
a
r

So string is textual data (literals) which can be defined in a three ways. That literals can be surrounded by single quotes, double quotes or backticks.

var first  = "Text"; //using double quotes 
var second = 'Text'; //using single quotes
var third  = `Text`; //using backticks

console.log(first);
console.log(second);
console.log(third);
Text
Text
Text

String methods and properties

There are various method are available in Javascript. In this given table are mention all available string methods which is commonly used.

Method Overview
length Length attribute are returns the total number of characters in string
anchor() Create anchor tag of given string
big() Returns a <big> tag of given string
blink() Returns a <blink> tag of given string.
bold() This method are add a <b> tag in given string and return this new string.
charAt() Returning a character from string by using of index value
charCodeAt() Returns UTF-16 unicode number of given index element value
codePointAt() This method are return UTF-16 unicode character value of given string index.
concat() Combine of two string text and returns a new single string
endsWith() This method are used to check given text are exist at the end of given string.
fontcolor() This method are used to add font (attribute) color of given text.
fontsize() This method are add in font element of given string and add font-size value and returning this new string text.
fixed() This method are adding <tt> element in a given text string and return this result.
includes() This method are used to find the text value in a given string.
indexOf() This method are returning first index of text which are exist in given string. If text are not exist then this are return the value of -1.
italics() This method are add <i> tag in given text string and return that result
lastIndexOf() This method are search a text value to a given string from at the end to beginning. When element are found then there is returning its index value. otherwise it will be return a -1 values.
link()
localeCompare()
match()
normalize()
padEnd()
padStart()
repeat()
replace()
search()
slice()
small()
split()
strike()
sub()
substr()
substring()
sup()
startsWith()
toString()
trim()
trimLeft()
trimRight()
toLowerCase()
toUpperCase()
valueOf()
toLocaleLowerCase()
toLocaleUpperCase()
trimStart()
trimEnd()

length

That is an attribute of string that are returns the number of character to string variables and string literals.

console.log("ABC".length);

//White space is count as single character
console.log("1  3  7".length);
console.log("       ".length);

//escape sequence are count as single character
console.log("A \n B  C".length);
console.log("A \\ B  C".length);
//unicode are count as single character
console.log("A\u0000BC".length);
3
7
7
8
8
4

anchor()

This method are create anchor tag of the string. This method are accept one parameter value this value are used to define name attribute of this anchor tag.

console.log("One".anchor('first'));
console.log("Two".anchor('second'));
<a name="first">One</a>
<a name="second">Two</a>

big()

This method are add <big> tag of string. normally most of browser are not support this tag.

console.log("One".big());
console.log("Two".big());
<big>One</big>
<big>Two</big>

blink()

This method are add <blink> tag on string. That is non-standard element which causes the enclosed text to flash slowly.

console.log("Test One".blink());
console.log("Test Two".blink());
<blink>Test One</blink>
<blink>Test Two</blink>

bold()

This method are add <b> tag on string.

console.log("Test One".bold());
console.log("Test Two".bold());
<b>Test One</b>
<b>Test Two</b>

charAt()

This method are returning a string text character by given index value.

var str = "Hello Programmer";
//Get a character value
console.log(str.charAt(0));
console.log(str.charAt(3));
H
l

charCodeAt()

This method are return UTF-16 unicode of given index character value.

var str = "ABCDEFG";
//return UTF-16 unicode number by index
console.log(str.charCodeAt(0));
console.log(str.charCodeAt(3));
65
68

codePointAt()

console.log(" A".codePointAt(1));
console.log("Z ".codePointAt(0)); 

console.log("a z".codePointAt(2));
console.log("abc".codePointAt(2));
65
90
122
99

concat()

This method are combine two string text values and return a new string.

var str1= "ABC";
var str2="XYZ";

//Combine two text string
var str3=str1.concat(str2);

console.log(str1);
console.log(str2);
console.log(str3);
ABC
XYZ
ABCXYZ

endsWith()

console.log("<= || =>".endsWith("=>"));
console.log("<= || =>".endsWith("==>"));
//conside space
console.log("Run this Code ".endsWith("Code")); //false
console.log("Run this Code".endsWith("Code")); //false
true
false
false
true

fontcolor()

console.log("Blue Text Color".fontcolor("blue"));
<font color="blue">Blue Text Color</font>

fontsize()

console.log("Text String".fontsize("14px"));
console.log("Text String".fontsize("16px"));
console.log("Text String".fontsize("30px"));
<font size="14px">Text String</font>
<font size="16px">Text String</font>
<font size="30px">Text String</font>

fixed()

console.log("Text One".fixed());
console.log("Text Two".fixed());
<tt>Text One</tt>
<tt>Text Two</tt>

includes()

console.log("Text One".includes("One"));
console.log("ABCXYZ".includes("D"));
console.log("ABCXYZ".includes("X"));
console.log("abcxyz".includes("X"));
true
false
true
false

indexOf()

console.log("Text One".indexOf("e"));//return first match index of e
console.log("ABCXYZ".indexOf("YZ"));
console.log("abcxyz".indexOf("x"));
console.log("abcxyz".indexOf("d")); //when char are not exist
1
4
3
-1

italics()

console.log("Text String one".italics());
console.log("Text String two".italics());
<i>Text String one</i>
<i>Text String two</i>

lastIndexOf()

console.log("Text One".lastIndexOf("e")); 
console.log("ZABCXYZ".lastIndexOf("Z"));
console.log("abcxxyz".lastIndexOf("x"));
console.log("abcxyz".lastIndexOf("d")); //when char are not exist
7
6
4
-1

link()

console.log("RegularCodes".link("www.regularcodes.com")); 
console.log("Codelike".link("www.codelike.in"));
<a href="www.regularcodes.com">RegularCodes</a>
<a href="www.codelike.in">Codelike</a>

localeCompare()

console.log("Equal".localeCompare("Equal")); //0
console.log("Not Equal".localeCompare("Equal")); //1
console.log("1010".localeCompare("Ten")); //-1
console.log("AB".localeCompare("AB")); //0
0
1
-1
0

match()

var word = '2021 is number 1';
// regular expression
var regex = /[0-9]/g;
// Find numbers
var result = word.match(regex);
// Display all numbers
console.log(result);
[ '2', '0', '2', '1', '1' ]

normalize()

var word = " Unicode : \u25CD  \u2A00";
// normalize Unicode
const result = word.normalize('NFC');
console.log(result);
 Unicode : ◍  ⨀

padEnd()

var str = '9';

console.log(str.padEnd(6, '0'));
900000

padStart()

var str = '10';

console.log(str.padStart(6, '0'));
000010

repeat()

var str = "Running ";

console.log(str.repeat(3));
Running Running Running

replace()

var str = "1010 1010";

console.log(str.replace("1010","Run"));
Run 1010

search()

var str = "This is simple text";

console.log(str.search("simple"));
console.log(str.search("text"));
console.log(str.search("iss"));
8
15
-1

slice()

console.log("Text One".slice(0, 4));
console.log("Text Two".slice(5,8));
Text
Two

small()

console.log("Text One".small());
console.log("Text Two".small());
<small>Text One</small>
<small>Text Two</small>

split()

var str = "Javascript Code Example";
var splitText = str.split(" ");
console.log(str); 
console.log(splitText);
php split() method example
Javascript Code Example
[ 'Javascript', 'Code', 'Example' ]

strike()

var str = 'Bug Error';

console.log(str.strike());
<strike>Bug Error</strike>

sub()

var str = 'Simple Text';

console.log(str.sub());

substr()

var str = 'Runing Code';

console.log(str.substr(0,3));
Run

substring()

var str = 'Runing Code';

console.log(str.substring(0,3));
Run

sup()

var str = 'Text Code';

console.log(str.sup());
<sup>Text Code</sup>

startsWith()

var str = 'Text Code';

console.log(str.startsWith("Text"));

console.log(str.startsWith("Code"));

console.log(str.startsWith("text"));
true
false
false

toString()

var number = 10;
var str = number.toString();

console.log(str);
console.log(typeof str);
10
string

trim()

var str = '    AB  XYZ    ';

console.log(str.trim());
AB  XYZ

trimLeft()

var str = '    AB  XYZ';

console.log(str.trimLeft());
AB  XYZ

trimRight()

var str = 'AB  XYZ   ';

console.log(str.trimRight());
AB  XYZ

toLowerCase()

console.log("ABCdEf".toLowerCase()); 
abcdef

toUpperCase()

console.log("Hello Programmer".toUpperCase()); 
HELLO PROGRAMMER

valueOf()

console.log("0/0".valueOf());

console.log((0/0).valueOf());


console.log("AB".valueOf());
0/0
NaN
AB

toLocaleLowerCase()

console.log("toLocaleLowerCase".toLocaleLowerCase());
tolocalelowercase

toLocaleUpperCase()

var simple ="AbcdEfg";
var upper_case =simple.toLocaleUpperCase();
console.log(simple);
console.log(upper_case);
AbcdEfg
ABCDEFG

trimStart()

trimStart() method are remove unnecessary space,tabs at beginning of string and return this new formatted string.

var old_str = "   This is text";
var new_str =old_str.trimStart();
console.log(old_str);
console.log(new_str);
   This is text
This is text

trimEnd()

trimEnd() method are remove unnecessary space tabs at the ending of string and return this new formatted string.

var old_str = "This is text    ";
var new_str =old_str.trimEnd();
console.log(old_str+"End");
console.log(new_str+"End");
This is text    End
This is textEnd




Comment

Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.

New Comment