How to Change CSS Using JavaScript
Cascading Style Sheets (CSS) is used to design the layout of a webpage. CSS is a set of structured rules describing the layout of elements in
Note: Be careful to not confuse substr() with the substring() method!
The example below demonstrates how to use substr() to extract a portion of a string:
const str = "Make a cut!"; console.log(str.substr(7, 3)); // Expected output: cut
In the example above the substr() method is being used to extract a certain part of the str String. The value returned starts at index 7, and proceeds for 3 more characters if they are available.
The substr() method returns a new string as its result.
Note: JavaScript strings are immutable – substr() creates a new string in memory upon completion.
The syntax of the substr() method is as follows:
String.substr(startIndex, length)
startIndex: the index at which to start the extraction.
length (optional): the number of characters to include in the extraction.
Note: the length parameter is optional. When omitted, the substr() method will extract characters from the startIndex to the end of the String it operates upon.
Note: A String’s index begins at zero.
String.length is equal to the index of the last character in the string + 1. This means that in order to retrieve the last character in a string, you need to use str.length – 1 to get the last index:
console.log(str[str.length - 1]); // Expected output: !
The example above returns the last character in our original test string, which is an exclamation mark.
There are a few special cases in the behavior of the substr() method that need additional explanation:
- When the startIndex is negative, the starting point of the substr() method is found by counting from the end of the String being operated upon:
const str = "Make a cut!"; console.log(str.substr(-6, 1)); // Expected output: a
In the example above, the extraction begins from str’s end (because a negative number is assigned to the startIndex parameter), counting back six characters, then extracting a single character. If the length parameter was omitted, all of the last six characters would be printed to the console.
- If the length provided is greater than String.length, the substr() method will treat it as String.length.
- Any argument which includes a decimal point will be rounded down (i.e. 6.72 will be converted to 6).
- Any value which is not a number (NaN) will be regarded as zero.
const str = "Make a cut!"; console.log(str.substr('start', 4.7)); // Expected output: Make
In the example above, the argument ‘start’ is not a number, therefore, the operation conducted by substr() begins from index zero in the str variable and count the next 4 characters (as 4.7 is rounded down).
- If no arguments are passed in, and both parameters are omitted, the substr() method returns a copy of the String it operates upon.
Similar methods
Related Articles
JavaScript – How to Use the toString method
Cascading Style Sheets (CSS) is used to design the layout of a webpage. CSS is a set of structured rules describing the layout of elements in
The Assignment operator is used to assign a value to a variable. Assignment (=) The assignment operator simply assigns the value of the right operand to
The for…in statement is used to loop through an object’s properties. Basic for…in loop example The following code demonstrates a basic example using the for…in statement