String Objects in JavaScript

Introduction 

In my previous article, I 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 quote (“”). A JavaScript string stores a series of

characters like “c sharp corner”.

Uses of string

  • It is used to store single characters, and

  • It stores an array of characters

  • It is used to manipulate text – search a particular letter and replace text

We can see one small example:

Example

Try it yourself,

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>String</title>  
</head>  
<body>  
    <h2>String </h2>  
    <script type="text/javascript">  
    var str = "vijayakumar S"; //string double quotes  
    var str1 = 'C sharp corner'; // single quotes  
    document.write (str+"<br>" );  
    document.write (str1+"<br>" );  
    </script>  
</body>  
</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,

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>String</title>  
</head>  
<body>  
    <h2>String </h2>  
    <script type="text/javascript">  
    var name ="wlcome vijayakumar"; //literal   
    var dept ="CSE"  
    document.write(name);   
    document.write("He is "+dept+"department");  
    </script>  
</body>  
</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,

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>String</title>  
</head>  
<body>  
    <h2>String Object </h2>  
    <script type="text/javascript">  
        var msg = new String("Welcome to JavaScript"); //String object  
        document.write(msg);  
        //comparisons of literal and objects  
        document.write("<br>");  
        var str1 ="String"; //literal way  
        var str2 = new String("String"); //object  
        var str3 = new String("String"); //object  
        (str1==str2)?document.write("Equal"):document.write("Not equal"); // comparisions value  
        document.write("<br>");  
        (str1===str2)?document.write("Equal"):document.write("Not equal"); // comparisoons type  
        document.write("<br>");  
        //The comparision of two object   
        (str2==str3)?document.write("Equal"):document.write("Not equal");// comparisions value  
        document.write("<br>");  
        (str2===str3)?document.write("Equal"):document.write("Not equal");// comparisions type  
        document.write("<br>");  
    </script>  
</body>  
</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 one or more strings.
4.indexOf () The given string or word to find the position of the specified value in a string.
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, and lesser means returns -1.
7.Match () The given string matches the sentence means and 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 is indexed with a particular index and returns the position of the match.
11.Split () It will split a string into an array of substrings.
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,

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>string</title>  
</head>  
<body>  
        <h2>String Length Property</h2>  
    <p id="len">Click the button to display number of characters in string is :</p>  
    <button onclick="mystr()">Str_len</button>  
    <script type="text/javascript">  
        var str ="Welcome to JavaScript";  
        function mystr() {  
            var str ="Welcome to JavaScript";  
            document.getElementById("len").innerHTML=str.length;  
        }  
        document.write("<br>Sting Length :"+str.length);  
    </script>  
</body>  
</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,

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>String</title>  
</head>  
<body>  
    <h2>To extract string character</h2>  
    <script type="text/javascript">  
        var str1 ="Welcome to JavaScript";  
        var str2 ="String Objects";  
        var str3 ="Methods"  
        document.write("<br>1.charAt() is:"+str1.charAt(3));   
        document.write("<br>2.charCodeAt()Method is:"+str1.charCodeAt());  
        document.write("<br>2.concat()Method concatinatation method is:"+str2.concat("",str3));//joining tow strings  
    </script>  
</body>  
</html>  

Output

String Objects In JavaScript

To Look for a Substring

Try it yourself,

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>String</title>  
</head>  
<body>  
    <h2>To look for a Substring</h2>  
    <script type="text/javascript">  
        var str ="JavaScript String Object is a universal object that store string."  
        document.write("<br>indexOf()Method find the object word is :"+str.indexOf("object"));   
        document.write("<br>lastIndexOf()Method find the object word is :"+str.lastIndexOf("object"));  
    </script>  
</body>  
</html>  

Output

String Objects In JavaScript

To Compare a String

Try it yourself,

<!DOCTYPE html>  
<html>  
<head>  
    <title>string Methods</title>  
</head>  
<body>  
    <h2>To Compare string</h2>  
    <script type="text/javascript">  
        //local compare no variables  
        document.write("<br>1.localeCompare()Method comparing of India and India is:"+'India'.localeCompare("India"));  
        //it will returns zero  
        document.write("<br>1.localeCompare()Method comparing of India and India is:"+'Indi'.localeCompare("India"));  
    </script>  
</body>  
</html>  

Output

String Objects In JavaScript

To Get a Substring

Try it yourself,

<!DOCTYPE html>  
<html>  
<head>  
    <title>string Methods</title>  
</head>  
<body>  
    <h2>To get Substring</h2>  
    <script type="text/javascript">  
        var str ="JavaScript String Object is a universal object that store string."  
        //string slice particular part string or character will be displayed  
        document.write("<br>slice()Method slice string is:"+str.slice());  
        // if give the value means to display the end posotion  
        document.write("<br>slice()Method slice string is:"+str.slice(3,10));  
        //substring  
        document.write("<br>substr()Method sub string is:"+str.substr(3,15));  
        //it diplay the string inbetween the two value   
        document.write("<br>substring()Method sub string is:"+str.substring(3,15));  
    </script>  
  
</body>  
</html>  

Output

String Objects In JavaScript

To Change Cases

Try it yourself,

<!DOCTYPE html>  
<html>  
<head>  
    <title>String Methods</title>  
</head>  
<body>  
    <h2>To Case Change</h2>  
    <script type="text/javascript">  
        var str1 ="Welcome to JavaScript";  
        var str4 ="WELCOME To JAVASCRIPT";//uppercase  
        //upper case and Lowercase  
        document.write("<br>toUpperCase()Method is:"+str1.toUpperCase('string','stirngs'));  
        document.write("<br>toLowerCase()Method is:"+str4.toLowerCase('string','stirngs'));  
    </script>  
</body>  
</html>  

Output

String Objects In JavaScript

To remove white space on both sides

Try it yourself,

<!DOCTYPE html>  
<html>  
<head>  
    <title>string methods</title>  
</head>  
<body>  
    <h2>To remove white Space both sides</h2>  
    <script type="text/javascript">  
        var str4 ="WELCOME     To      JAVASCRIPT";  
        //trim method remove unnecessary spaces  
        document.write("<br>trim()Method is:"+str4.trim());  
    </script>  
</body>  
</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 helpful to you. Thanks for reading!