DONATE  
MENU
AJAX
HTML
JAVASCRIPT
JSON

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Introduction » String Object
Share Tweet WhatsApp

String Object

JavaScript strings though primitive have an object that can help in manipulating them. Strings can also be created directly from the object,
var str = new String("Hello World");
Nevertheless, It is best to create strings using the explicit method e.g var str = "Hello World";. The string object have properties and methods that can be used in manipulating all JavaScript strings whether created from the strings' object or using the explicit method of creating strings. In this page, we shall get familiarized with some of these properties and methods. String Properties 1. length The most notable property of the string object is the length property which allows you to know the length or number of characters contained in a string including white spaces.
<script>
var str = "Hello World";
var len = str.length; //string length

alert(len); //11
</script>

Copy PRACTICE IT

2. prototype This static property enables you to access the prototype that is used in creating strings' objects. By accessing it, you can add your own properties and methods so that the object for every string in a document or script will also possess those added properties and methods.
<script>
//ADDING NEW PROPERTY TO STRING'S OBJECT PROTOTYPE
String.prototype.parentString = "Hello World";
//CREATING NEW STRING THAT POSSESSES THAT PROPERTY
var str = "Hello Tehillah";
var parentStr = str.parentString; //Using the new property
alert(parentStr);
</script>

Copy PRACTICE IT

It also enables you to modify the values of the objects' prototype properties and methods.
<script>
String.prototype.constructor = "No constructor"; //Modifies the 'constructor' property of the String prototype
var str = "Hello World";
alert(str.constructor);
</script>

Copy PRACTICE IT

Usually, the constructor property of objects return the function constructor used in defining the object's prototype but above, through the help of the prototype property, we modified its value to "No constructor" for strings. It will henceforth remain so for every string object created from that prototype. 3. constructor The constructor property returns the JavaScript function constructor that is used in creating strings' object.
<script>
var str = "I love strings";
alert(str.constructor);
</script>

Copy PRACTICE IT

String Methods 1. charAt() The charAt() method allows you to get a particular character located in a string. You specify a number representing the position of the character in its parameter e.g the first character position is 0, second is 1 and so on. White spaces are included.
<script>
var str = "My Book";

var char = str.charAt(3); //B
alert(char);
</script>

Copy PRACTICE IT

2. charCodeAt() Similar to charAt() method but it returns the Unicode of the character.
<script>
var str = "My Book";

var charCode = str.charCodeAt(3); //B = 66
alert(charCode);
</script>

Copy PRACTICE IT

3. concat() The concat() method allows you to join two or more strings together.
<script>
var str = "Hell";

var newStr = str.concat("o").concat(" World");
alert(newStr);
</script>

Copy PRACTICE IT

4. endsWith() This method enables you to test if a string ends with a particular character(s) or not.
<script>
var str = new String("JavaScript");

if (str.endsWith("v")){
alert(str+" ends with letter v");
}
else
{
alert(str+" doesn't end with letter v");
}
</script>

Copy PRACTICE IT

5. fromCharCode() Enables you to convert any character Unicode to its original character.
<script>
var str = String.fromCharCode(72)+String.fromCharCode(105);
alert(str); //Hi
</script>

Copy PRACTICE IT

6. includes() Enables you to check if a string contains a character or string. It's case sensitive.
<script>
var str = "JavaScript";
alert(str.includes("s")); //false because the available s character is capitalized
alert(str.includes("Script")); //true
</script>

Copy PRACTICE IT

7. indexOf() Returns the position of the first appearance of a character or string in a string. Remember the position of the first character is 0. It is case sensitive and if a character/string position is not found, it returns -1
<script>
var str = "JavaScript Script";
    
alert(str.indexOf("Script")); //4
</script>

Copy PRACTICE IT

8. lastIndexOf() Returns the position of the last appearance of a character or string in a string. It is almost similar to indexOf() but returns the position of the last occurence.
<script>
var str = "JavaScript Script";
    
alert(str.lastIndexOf("Script")); //11
</script>

Copy PRACTICE IT

9. localeCompare() This method compares a string with another string according the language settings of the user's browser. It returns 0 if both strings are the same, 1 if the strings are different and -1 if the strings being compared have some characters in common.
<script>
var str = "Hello";
alert(str.localeCompare("Stack")); //Returns 1 - They are not the same or have nothing in common
alert(str.localeCompare("Hello")); //Returns 0 - No differences between both
alert(str.localeCompare("Hello World")); //Returns -1 - compared strings have some characters in common
</script>

Copy PRACTICE IT

10. match() The match() method finds matches of a regular expression in a string. It thereafter returns all matches found in an array or returns null if no matches were found.
<script>
var regx = /e/g; //regular expression to find all cases of "e" in a string
var str = "Hello Janet, How are you?"; //the string
var matches = str.match(regx); //returns an array of all "e" found in the string

document.write("The number of 'e' found in the string \""+str+"\" are "+matches.length);
</script>

Copy PRACTICE IT

11. repeat() This method enables you to repeat a string for a specified number of time.
<script>
var str = "Error!!!";
alert(str.repeat(10)); //repeat string 10 times
</script>

Copy PRACTICE IT

12. replace() This method enables you to replace a character or string in a string with another character or string.
<script>
var str = "Hello World";
alert(str.replace("World","People")); //Replaces World with People
</script>

Copy PRACTICE IT

13. search() The search() method searches a string for an occurence and returns the position where the occurrence began. In this case, it can take a character(s) or a regular expression in its parameter for the search. It returns -1 if no occurrence occurred.
<script>
var str = "StackBeginner Tutorials";
alert(str.search("Beginner"));
</script>

Copy PRACTICE IT

<script>
var str = "StackBeginner Tutorials";
var regx = /StackTutorial/;
alert(str.search(regx));
</script>

Copy PRACTICE IT

14. slice() Extracts or takes out a part of a string to form another string. It has two parameters. The first is to indicate the position to start from and the last indicates the position (not inclusive) to stop at. Use a negative number to start from the end of the string. Also, you may leave the second argument to return all characters thereafter.
<script>
var str = "StackBeginner";
var newStr = str.slice(0, 5); //starts at the first character(S) and ends before the character at position 5(B)
document.write(newStr);
</script>

Copy PRACTICE IT

15. split() This method splits a string at a specified point and return an array containing the individual parts. The specified point may be just any character e.g dots, commas and etcetera.
<script>
var str = "Stack Beginner Tutorial";
str = str.split(" ");//Splits a string wherever there is a single white space

 //Using/Looping the array returned
for (i in str){
alert(str[i]);
}
</script>

Copy PRACTICE IT

16. startsWith() Enables you to check if a string starts with a character or string. It's case sensitive.
<script>
var str = "Hello World";
alert(str.startsWith("He")); //true
</script>

Copy PRACTICE IT

17. substr() Extracts or takes out a part of a string to form another string. It has two parameters. The first is to indicate the position to start from and the last indicates the number of characters to return. Use a negative number to start from the end of the string. Also, you may leave the second argument to return all characters thereafter.
<script>
var str = "Hello World";
var newStr = str.substr(0, 4); //Hell - starts at the first character and return 4 characters
alert(newStr);
</script>

Copy PRACTICE IT

The above will return 4 characters starting from the first character(0). 18. substring() Does same thing as the substr() but the difference is the second argument specifies a number representing the position of the character where it should stop. For example, if the substring() starts from 0(first character) and is told to end at 2 (not inclusive). It stops at the second character which is the character before the position(2) it was told to stop. Use a negative number to start from the end of the string. Also, you may leave the second argument to return all characters thereafter.
<script>
var str = "Hello World";
var newStr = str.substring(0, 4); //Hell - started at 0 and stopped when it gets to the character at position 4
alert(newStr);
</script>

Copy PRACTICE IT

The above starts from the first character and end before the character located at position 4(o). 19. localeLowerCase() Converts all the characters of a string to lower cases according to the language settings of the user's browser. 20. localeUpperCase() Converts all the characters of a string to upper cases according to the language settings of the user's browser. 21. toLowerCase() Converts all the characters of a string to lower cases.
<script>
var str = "Hello World".toLowerCase();
alert(str);
</script>

Copy PRACTICE IT

22. toString() Returns the string value of a string object.
<script>
var str = "Hi Joe";
alert(str.toString());
</script>

Copy PRACTICE IT

23. toUpperCase() Converts all the characters of a string to upper cases.
<script>
var str = "Hi Jane";
alert(str.toUpperCase());
</script>

Copy PRACTICE IT

24. trim() Removes white space from both the left and right end of a string. For example, " Hi Jane " becomes "Hi Jane";
<script>
var str = " Hello World ";
str = str.trim(); //Hello World
alert(str);
</script>

Copy PRACTICE IT

25. valueOf() The valueOf() method returns the primitive value of a string.
<script>
var str = "Hello World";

str = str.valueOf();
alert(str);
</script>

Copy PRACTICE IT

Using the valueOf() method in your code is meaningless. It is used internally by JS and it is what is used so that whenever you use or output a string(an object), it returns the string instead of [object String]. SUMMARY
  1. All JavaScript strings possess an object.
  2. The object contains mostly properties that enable you get some attributes of a string e.g its length.
  3. The object also contains methods that enable you manipulate strings and determine certain features of a string.
Take a short quiz on String Object.
Ask a question or tell us if String Object is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode