16. Built-in Objects of JavaScript/ECMAScript -Part III

In our last post we learnt in depth the Function and Array built-in objects. Let us move ahead a see the properties of a String built-in object now. This is a very important built-in object and is very useful for all string manipulations, transformations and also searches using regular expressions .:

String Objects

The String Constructor Called as a Function

When String is called as a function rather than a constructor, it does type conversion.
String ( [ value ] ) - This converts the value argument to string and returns it. If not value is provided an empty "" is returned.

The String Constructor

When called with the new keyword, it initializes are newly created object.
new String ( [ value ] ) - This does the below 3 things:

  • It sets the [[Prototype]] internal property of the newly created object to String.prototype.
  • The class internal property is set to String.
  • [[Extensible]] internal property is set to true.
  • [[PrimitiveValue]] internal property is set to ToString(value) or "" if a value is not specified.

Properties of the String Constructor

  • The [[Prototype]] internal property points to Function prototype object.
  • String.prototype - It has the value is the built-in String prototype object. Its attributes are { [[Writable]]: false, [[Enumerable]]: false, [[Configurable]]: false }.
  • String.fromCharCode ( [ char0 [ , char1 [ , … ] ] ] ) - Returns a String value containing as many characters as the number of arguments. Each argument specifies one character of the resulting String, with the first argument specifying the first character, and so on, from left to right. An argument is converted to a character by applying the operation ToUint16 and regarding the resulting 16-bit integer as the code unit value of a character. If no arguments are supplied, the result is the empty String.
    console.log(String.fromCharCode(72,69,76,76,79));//HELLO
    

Properties of the String Prototype Object

The String prototype object is itself a String object (its [[Class]] is "String") whose value is an empty String.
The value of the [[Prototype]] internal property of the String prototype object is the standard built-in Object prototype object.

  • String.prototype.constructor: The initial value of String.prototype.constructor is the built-in String constructor
  • String.prototype.toString ( ): Returns the string value.
  • String.prototype.valueOf ( ): Returns the string value.
  • String.prototype.charAt (pos): Returns a string made of the character at position pos. If no character is found at the position an empty string is returned. **The result is a string value and not a string object.
  • String.prototype.charCodeAt (pos): Returns a Number that represents the code unit value of the character present at position pos. If not character is found NaN is returned.
  • String.prototype.concat ( [ string1 [ , string2 [ , … ] ] ] ): When called with 0 or more arguments it forms a string(not a String object) and returns it. The string formed consists of the value of the string object on which concat is called followed by the each argument converted to string.
  • String.prototype.indexOf (searchString, position): If searchString appears as a substring of the result of converting this object to a String, at one or more positions that are greater than or equal to position, then the index of the smallest such position is returned; otherwise, ‑1 is returned. If position is undefined, 0 is assumed, so as to search all of the String.
  • String.prototype.localeCompare (that): The String on which the localeCompare method is invoked, does a locale-sensitive comparison with the that argument and returns a Number other than NaN. If not language sensitive information is available in the host system, it them does a bitwise comparison.
    The additional parameters to this method, which defines the local to be used(defaults to the host environment locale) and also provide some other parameters are specific to the host environment implementation. For example, in MDN, the implementation supports the below syntax:

    referenceStr.localeCompare(compareString[, locales[, options]])
    

    For more details see ECMAScript Internationalization API and Intl.Collator.

  • String.prototype.match(regExp): This provides the result after matching a string against the regular expression provided as the argument.
    If no argument is provided, and empty array [""] will be returned. If the argument is not a Regular Expression object then it is implicitly converted to an object of type RegExp by using the new operator as new RegExp(regExp).
    The returned array contains some additional properties also like groups(if regular expression capturing groups are used), index(index at which match was found), input(the string on which match function is invoked).
    Regular expressions used as the parameter to the match function is a big topic in itself and I will cover it under a separate post.

  • String.prototype.replace(searchValue, replaceValue): Returns a new string after replacing the passed pattern with the replacement value. Multiple occurrences of the pattern can only be replaced using regular expressions . The Syntax for replace is :

    var newString = myString.replace(regexp | substr, newSubstr | function);
    

    regexp: A regular expression object or literal.
    substr: Sub-string that needs to be replaced. Only the first occurrence will be replaced.
    newSubstr : This is the replacement string.
    function: A function whose return value is a string which will serve as the replacement string.
    The below example show how simple strings and regular expressions can be used to replace parts of the string and return the new string:

    var baseString = "this is the base string with integer 1";
    console.log(baseString.replace("base", "replacement"));//this is the replacement string with integer 1
    console.log(baseString.replace(/b\w+/, "replacement"));//this is the replacement string with integer 1
    

    There are a few more special strings that can be passed as the replacement strings and this will cause the returned string to be different than the simple string replacement we have seen now:

    • $$ - this assign the value of "$" to the replacement string.
    • $& - this assigns the value of the replacement string to the value of the pattern which is being replaced.
    • $` - this assigns a value to the replacement string which is the portion of string that is present before the matched string pattern.
    • $' - this assigns a value to the replacement string which is the portion of string that is present after the matched string pattern.
    • $n - in this case if capturing groups are used then based on the value of n(positive integer) the replacement string gets a value which is the value of capturing group n.
      Let's see some examples:
      var baseString = "this is the base string with integer 1";
      console.log(baseString.replace(/b\w+/, "$$"));//this is the $ string with integer 1
      console.log(baseString.replace(/b\w+/, "$&"));//this is the base string with integer 1
      console.log(baseString.replace(/b\w+/, "$`"));//this is the this is the  string with integer 1
      console.log(baseString.replace(/b\w+/, "$'"));//this is the  string with integer 1 string with integer 1
      console.log(baseString.replace(/b(\w+)/, "$1"));//this is the ase string with integer 1
      var name = "Cruise Tom";//Last name, First Name
      //using regular expressions we can make it to First Name, Last Name as below
      var reg = /(\w+)\s(\w+)/;
      console.log(name.replace(reg, "$2 $1"));//Tom Cruise
      
      Now when using function as the second argument to a replace call, the function gets invoked only when a pattern match is found. The above mentioned special replacement strings are not valid here. If a regular expression is used with a g global parameter then for each match the function gets invoked.
      Now based on the first parameter that was passed to the replace function, the replacement function will get the below parameters:
    • match - the matched sub-string
    • n1,n2,... - this parameter is applicable only when capturing groups are present in the regular expression literal/object passed to the replace function as the first parameter. e.g. if regular expression is /(\w+)(\d+)/ then n1 = (\w+) and n2 = (\d+).
    • offset - the offset of the matched sub-string within the whole string being examined.
    • string - the input string
      Below example shows how a function might be used:
      var str = "the next number is 1";
      var reg = /(\d)/;
      console.log(str.replace(reg, replacer));//the next number is 2
      function replacer(match, n1, offset, inputString){
          return +n1 + 1;
      }
      
  • String.prototype.search(regexp): It returns the index of the input string where the first pattern match is found. If not match is found it returns -1.
    var str = "search for the + sign";
    var reg = /\+/;
    console.log(str.search(reg));//15
    
  • String.prototype.slice(start, end): It returns a sub-string from the string on which this method is called. The sub-string starts from the index indicated by start and ends at end-1(excluding end). If end is undefined then it goes through the end of the string. If either start or end is negative and if len is the length of the string, then max(len+start, 0) or max(len+end, 0) is considered:
    var str = "let us chop this string";
    console.log(str.slice(1, 10));// et us cho
    console.log(str.slice(-3, 21));// i
    console.log(str.slice(-3, 1));//empty string
    console.log(str.slice(-8, -1));//s strin
    
  • String.prototype.split(separator, limit): This returns an array whose elements are parts of the string whose boundary elements are defined by the separator parameter. This parameter can be a String or a regular expression. The limit limits the number of elements that the resulting array of the split can contain. If the separator is omitted, the resulting array contains one element which is the entire string.
    var str = "abc,def,ghi";
    console.log(str.split(","));//[ 'abc', 'def', 'ghi' ]
    
  • String.prototype.substring(start, end): As the name suggests it return a part of the string as sub-string. end index is not included in the sub-string. If start is greater than end they are swapped. NaN or negative argument is replaced with 0. For both the arguments the max(start, len) or max(end, len) is considered where len is the length of the string.
    var str = "abc,def,ghi";
    console.log(str.substring(2,7));//c,def
    
  • String.prototype.toLowerCase(): Converts the characters of the string into the lower case
  • String.prototype.toUpperCase(): Converts the characters of the string into the upper case
    The point to note here is that these conversions are not symmetrical, i.e. for all string s:
    s.toUpperCase().toLowerCase() != s.toLowerCase()
  • String.prototype.toLocaleLowerCase(): Same as toLowerCase except that the result is takes into consideration the host environment's current locale. Most of the time we will not see any differences except for languages like Turkish.
  • String.prototype.toLocaleUpperCase():Same as toUpperCase except that the result is takes into consideration the host environment's current locale. Most of the time we will not see any differences except for languages like Turkish.
  • String.prototype.trim(): This method eliminates all leading and trailing white space characters.
    var str = "          This is a sentence \t";
    console.log(str.trim());//This is a sentence
    

    Properties of String Instances

  • length: it represents the number of characters that are present in the string.
  • [[GetOwnProperty]] ( P ): It returns a property descriptor of the value of the string. The value is:
    { [[Value]]: resultStr, [[Enumerable]]: true, [[Writable]]: false, [[Configurable]]: false }

In JavaScript Strings are immutable

So this was in brief the properties of the String built-in object. In the next post we will explore the remaining built-in objects.

References:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
https://www.ecma-international.org/ecma-262/5.1/#sec-15.5