String Objects in JavaScript

Introduction 

 
In my previous article, I have explained the underlying concepts and methods and properties. In this article, we learned about String objects and String methods and Properties in JavaScript.
 
Definition
 
A String is a collection of characters (or) sequence of characters, which is always enclosed with a single (‘’) or double quotes (“”). A JavaScript string stores a series of
characters like “c sharp corner”.
 

Uses of string

  • It is used to storing single characters, and
  • It stores an array of characters
  • It is used to manipulating text – search a particular letter and replace text
We can see one small example:
 
Example
 
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>String</title>  
  6. </head>  
  7. <body>  
  8.     <h2>String </h2>  
  9.     <script type="text/javascript">  
  10.     var str = "vijayakumar S"//string double quotes  
  11.     var str1 = 'C sharp corner'// single quotes  
  12.     document.write (str+"<br>" );  
  13.     document.write (str1+"<br>" );  
  14.     </script>  
  15. </body>  
  16. </html>  
Output
 
String Objects In JavaScript
 
Note
It is immutable, the string cannot be changed in JavaScript. It is impossible to change a particular character.
 
Creation of string
  • By string literal
    var string name = “string value”;
zero or more characters written inside single or double quotes or backticks. The string indexes are zero-based, the first character is in position 0 and the second in 1.
  • By string object using ‘new’ keyword
    var string name = new string (“string value”); 
In this, a new keyword is used to create an instance of a string. The string object has some disadvantages, for example, the execution speed is slow.
 
Now, we can see an example of string creation.
 
String as Literals
 
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>String</title>  
  6. </head>  
  7. <body>  
  8.     <h2>String </h2>  
  9.     <script type="text/javascript">  
  10.     var name ="wlcome vijayakumar"//literal   
  11.     var dept ="CSE"  
  12.     document.write(name);   
  13.     document.write("He is "+dept+"department");  
  14.     </script>  
  15. </body>  
  16. </html>  
Output
 
String Objects In JavaScript
 
String as Object
 
JavaScript String Object is a universal object that is used to store strings. A string is a combination of letters, numbers, special characters (single or double quotations), and arithmetic values. 
 
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>String</title>  
  6. </head>  
  7. <body>  
  8.     <h2>String Object </h2>  
  9.     <script type="text/javascript">  
  10.         var msg = new String("Welcome to JavaScript"); //String object  
  11.         document.write(msg);  
  12.         //comparisons of literal and objects  
  13.         document.write("<br>");  
  14.         var str1 ="String"//literal way  
  15.         var str2 = new String("String"); //object  
  16.         var str3 = new String("String"); //object  
  17.         (str1==str2)?document.write("Equal"):document.write("Not equal"); // comparisions value  
  18.         document.write("<br>");  
  19.         (str1===str2)?document.write("Equal"):document.write("Not equal"); // comparisoons type  
  20.         document.write("<br>");  
  21.         //The comparision of two object   
  22.         (str2==str3)?document.write("Equal"):document.write("Not equal");// comparisions value  
  23.         document.write("<br>");  
  24.         (str2===str3)?document.write("Equal"):document.write("Not equal");// comparisions type  
  25.         document.write("<br>");  
  26.     </script>  
  27. </body>  
  28. </html>  
Output
 
String Objects In JavaScript
 

String Object Properties and Methods

 
String property
  • Length property – returns the length of the string.
String Methods
 
String Methods
Description
1.charAt()
It returns a character at the specified position.
2.charCodeAt ()
It returns the Unicode of a specific character.
3.concat ()
Concatenation, joining the one or more string.
4.indexOf ()
The given string or word, to find the position of the specified value in a sting
5.lastindexOf ()
To find the last position of the specified value in a string.
6.LocaleCompare ()
Comparing the two words, which is equal means returns 1, it is greater means returns 0, lesser means returns -1.
7.Match ()
The given string matches the sentence means, returns the position.
8.Replace ()
The specified string will be converted to a new string.
9.Search ()
search the specific value or string, in a given paragraph, and return the position of the match.
10.Slice ()
The given particular index, in the index indexed with particular index and returns the position of the match.
11.Split ()
It will split a string into an array of substring.
12.Substr ()
Returns the characters in a string starting at the specified location by a specified number of characters.
13.subString ()
It returns characters from a string, between two specified indexes.
14.tostring ()
Returns the value of the specified string object.
15.Trim ()
Eliminates the space between the two ends of a string.
16.toUpperCase ()
It converts a string to uppercase (capitalize) letters.
17.toLowerCase ()
It converts a string to Lowercase letters.
18.valueOf ()
it will display the total string value or primitive value of a string object.
 
Example of string Property
 
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>string</title>  
  6. </head>  
  7. <body>  
  8.         <h2>String Length Property</h2>  
  9.     <p id="len">Click the button to display number of characters in string is :</p>  
  10.     <button onclick="mystr()">Str_len</button>  
  11.     <script type="text/javascript">  
  12.         var str ="Welcome to JavaScript";  
  13.         function mystr() {  
  14.             var str ="Welcome to JavaScript";  
  15.             document.getElementById("len").innerHTML=str.length;  
  16.         }  
  17.         document.write("<br>Sting Length :"+str.length);  
  18.     </script>  
  19. </body>  
  20. </html>  
Output
 
String Objects In JavaScript
 
Example of string Methods
 
In the below example, all the string methods are included in this example.
 
To Extract String Characters
 
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>String</title>  
  6. </head>  
  7. <body>  
  8.     <h2>To extract string character</h2>  
  9.     <script type="text/javascript">  
  10.         var str1 ="Welcome to JavaScript";  
  11.         var str2 ="String Objects";  
  12.         var str3 ="Methods"  
  13.         document.write("<br>1.charAt() is:"+str1.charAt(3));   
  14.         document.write("<br>2.charCodeAt()Method is:"+str1.charCodeAt());  
  15.         document.write("<br>2.concat()Method concatinatation method is:"+str2.concat("",str3));//joining tow strings  
  16.     </script>  
  17. </body>  
  18. </html>  
 Output
 
String Objects In JavaScript
 
To Look for a Substring
 
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>String</title>  
  6. </head>  
  7. <body>  
  8.     <h2>To look for a Substring</h2>  
  9.     <script type="text/javascript">  
  10.         var str ="JavaScript String Object is a universal object that store string."  
  11.         document.write("<br>indexOf()Method find the object word is :"+str.indexOf("object"));   
  12.         document.write("<br>lastIndexOf()Method find the object word is :"+str.lastIndexOf("object"));  
  13.     </script>  
  14. </body>  
  15. </html>  
 Output
 
String Objects In JavaScript
 
To Compare a String
 
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>string Methods</title>  
  5. </head>  
  6. <body>  
  7.     <h2>To Compare string</h2>  
  8.     <script type="text/javascript">  
  9.         //local compare no variables  
  10.         document.write("<br>1.localeCompare()Method comparing of India and India is:"+'India'.localeCompare("India"));  
  11.         //it will returns zero  
  12.         document.write("<br>1.localeCompare()Method comparing of India and India is:"+'Indi'.localeCompare("India"));  
  13.     </script>  
  14. </body>  
  15. </html>  
 Output
 
String Objects In JavaScript
 
To Get a Substring
 
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>string Methods</title>  
  5. </head>  
  6. <body>  
  7.     <h2>To get Substring</h2>  
  8.     <script type="text/javascript">  
  9.         var str ="JavaScript String Object is a universal object that store string."  
  10.         //string slice particular part string or character will be displayed  
  11.         document.write("<br>slice()Method slice string is:"+str.slice());  
  12.         // if give the value means to display the end posotion  
  13.         document.write("<br>slice()Method slice string is:"+str.slice(3,10));  
  14.         //substring  
  15.         document.write("<br>substr()Method sub string is:"+str.substr(3,15));  
  16.         //it diplay the string inbetween the two value   
  17.         document.write("<br>substring()Method sub string is:"+str.substring(3,15));  
  18.     </script>  
  19.   
  20. </body>  
  21. </html>  
Output
 
String Objects In JavaScript
 
To Change Cases
 
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>String Methods</title>  
  5. </head>  
  6. <body>  
  7.     <h2>To Case Change</h2>  
  8.     <script type="text/javascript">  
  9.         var str1 ="Welcome to JavaScript";  
  10.         var str4 ="WELCOME To JAVASCRIPT";//uppercase  
  11.         //upper case and Lowercase  
  12.         document.write("<br>toUpperCase()Method is:"+str1.toUpperCase('string','stirngs'));  
  13.         document.write("<br>toLowerCase()Method is:"+str4.toLowerCase('string','stirngs'));  
  14.     </script>  
  15. </body>  
  16. </html>  
Output
 
String Objects In JavaScript
 
To remove white space on both sides
 
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>string methods</title>  
  5. </head>  
  6. <body>  
  7.     <h2>To remove white Space both sides</h2>  
  8.     <script type="text/javascript">  
  9.         var str4 ="WELCOME     To      JAVASCRIPT";  
  10.         //trim method remove unnecessary spaces  
  11.         document.write("<br>trim()Method is:"+str4.trim());  
  12.     </script>  
  13. </body>  
  14. </html>  
Output
 
String Objects In JavaScript
 

Summary

 
In this article, we have learned about String Objects, String object Methods, and Properties. I hope this article was useful to you. Thanks for reading!