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
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 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 Object Properties and Methods
String property
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
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
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
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
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
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
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
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!