Introduction to JavaScript String Length
A String is a data type or a class that is a collection of multiple characters. Javascript provides us with multiple properties and methods to handle and manipulate Strings. We can add, modify and replace the string content. We can splice, find the character and convert it to lower and upper case and much more. One of the most basic and important properties of the javascript String property is its length property. A string is immutable, so any of the methods calls on string returns a new string object, and the original string is not manipulated and remains intact.
The length of a String is nothing but the number of characters in a string that is similar to any other object. This property returns the count of characters in the String with a string object’s help, which it uses to call length property. The returned value is an unsigned integer. The length of a String is always equivalent to one plus the highest index of the character array when that string is converted into a character array as array indexing always starts from zero.
Initially, no maximum length was specified for the string. Now, ECMAScript 2016 (ed. 7) specified 2^53 – 1 length as the maximum length. Firefox has 2^30 – 2 as the maximum length, which is nearly equivalent to 1 GB, which increases capacity. Before Firefox 65 versions, the string length was restricted to 2^28 – 1, which is nearly equal to 256MB. This was the earlier maximum capacity for a string in firefox.
Syntax:
var Stringlength = String.length;Where Stringlength is a variable that stores the number of characters in the String object, which is returned by the right-hand side expression.
We can set the length of a string using the following syntax:
String.length = number;Where number is the required maximum capacity of the String object of holding the characters
Examples of JavaScript String Length
The string.length is a JavaScript attribute that is used to find the length of a string. Examples of javascript string length are given below:
Example #1 – Finding the Length of a String
Code:
<!DOCTYPE html>
<html>
<body>
<p>Demonstrating the length property usage for strings.</p>
<button onclick="getLength()">Display Length</button>
<p id="sample"></p>
<script>
function getLength() {
var sampleString = "Let's play with strings!"; var stringLength = sampleString.length;
document.getElementById("sample").innerHTML = stringLength;
}
</script>
</body>
</html>Output:
Output specifies that the number of characters in the “Let’s play with strings!” string is 24. This length is displayed after clicking on the button as the getLength() method is called on click of the “Display Length” button.
Example #2 – Assigning the Length to String Object
Assigning length to the existing string does not affect it functionally. Syntax of assigning length to string is as follows:
String.length = number;Let’s confirm it with the help of an example.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Demonstrating the length property assignation for strings.</p>
<p>This has no observable effects if the string already holds a value.</p>
<button onclick="assignLength()">Display Length</button>
<p id="demo"></p>
<script>
let sampleString = "Javascript Strings";
document.getElementById("demo").innerHTML = "Length before assigning "+sampleString.length;
function assignLength() { sampleString.length = 4;
document.getElementById("demo").innerHTML = "Length after assigning "+sampleString.length;
}
</script>
</body>
</html>Output:
Before clicking on the button.
After clicking on the button.
Example #3 – Internal Working of String Length Property
The length property checks for the number of Unicode contained in string. The string format in javascript, which is UTF-16, uses a 16-bit code to represent the most commonly used characters. However, a few complex characters need two Unicode to specify a single character. Hence, it is possible that sometimes the length property will not return the number of characters in it. However, it occurs very rarely as most frequent characters take only a single Unicode for their representation.
You can write a function that considers characters instead of Unicode representations for length calculation of string. This can be achieved by using the following code-
Code:
function getCharLen (stringIterator) {
// The above stringIterator iterates on all the characters and
//not on the unicodes of characters which results in correct length of characters return [...stringIterator].length;
}
document.write(getCharLen('C\uE903\uAB78W')); // 3
// It is not recommended but you can use this method whenever
//you want to find out the length of string Object.defineProperty(string.prototype, 'characterLengthOfString', { get () {
return getCharLen(this);
}
});
document.write('C\uE903\uAB78W'.characterLengthOfString); // 3Example #4 – An Empty String
An empty string has no characters in it. Hence, its length is by default as zero. Let’s confirm it by using an example:
Code:
<!DOCTYPE html>
<html>
<body>
<p>Demonstrating the length property of empty string.</p>
<p id="demo"></p>
<script>
let sampleString = "";
document.getElementById("demo").innerHTML = "Length of empty string "+sampleString.length;
</script>
</body>
</html>Output:
Example #5 – Attributes of Length Property
Writable, Configurable and enumerable are the three attributes of any property. For length property, the writable property is set to no, while length property is non-configurable and nonenumerable. The length property is not writable means that its value cannot be changed and modified externally. It is non-configurable means it’s any of the attributes, writable, configurable or enumerable, cannot be changed. It is non-enumerable means its value cannot be iterated over loop like in for loops, etc. The string is an immutable object that means every operation on it results in new string object creation while the original object remains unaffected.
Compatibility:
Length property for Strings is available and compatible for the following browsers, and minimum supporting versions are also specified.
Desktop Versions:
- Chrome 1.0
- Internet Explorer 12.0
- Mozilla Firefox 1.0
- Opera
- Safari
Mobile Versions:
- Android webview 1
- Chrome for android 18.0
- Firefox for android 4.0
- Opera for android
- safari on iOS
- Samsung Internet 1.0
- Node.js
Conclusion
We can conclude that the length property mentions the maximum capability of a String that means the maximum number of characters it can store and hence used while iterating and checking the conditions in the internal methods of string-like replace, toLowerCase, splice, split, search, etc. These internal methods convert the string into a character array and then perform their function on it. We can determine the size of the string and its length during our usual coding by using length property of string, which can be further used while iterating using the string iterator. In this way, we can use the length property to manipulate our working code and Strings.
