If you are new to JavaScript, this post will be helpful in getting you familiar with one it's most common methods -- toString()! If not, then this might be a nice refresher where you learn about alternate ways of using this method. Understanding these two interesting use-cases for toString() may help you save time and write less code.
Definition of toString() Method
In JS, the method toString() is a prototype method of the Object class that returns a string representation of the object-type it is being invoked against. Since nearly everything in JS is a descendant of an object, they are able to be represented as a string with toString():
// traditional objects
let testObj = {
name: "Brandon",
age: 28,
location: "Massachusetts"
}
console.log(testObj.toString()) // --> "[object Object]"
// numbers (integers and decimal numbers)
let testNum = 42
console.log(testNum.toString()) // --> "42"
// Date objects
let currentDate = new Date()
console.log(currentDate.toString()) // --> "Sat May 08 2021 22:11:34 GMT-0400 (Eastern Daylight Time)"
// even arrays!
let testArr = [1,2,3,4]
console.log(testArr.toString()) // --> "1,2,3,4"
The toString() function is one of the most widely-used built-in JS functions given its flexibility with multiple data types. In this article, we are going to explore some less common use-cases for toString() that will take your programming to the next level.
Use-Case #1: Change Integers from Base-10 to Binary
When it comes to performing string conversion on integers, an optional radix parameter can be passed to toString() to convert base-10 integers to other bases. Every base-10 integer has a base-2, binary equivalent. Although there are plenty of other ways of converting a base-10 integer to binary, toString() makes the task seamless when you pass in 2 as the radix.
let testNum = 42
let binaryTestNumStr = testNum.toString(2)
console.log(binaryTestNumStr) // --> "101010"
As long as the data type being used with toString() is an integer, when you pass in 2, you will get a string representation of the integer in binary form.
Use-Case #2: Convert Colors from RGB to Hexadecimal
The toString() function can also be used to change RGB values to hexadecimal.
In web development, programmers use CSS to add styling to their websites, including color. One common way of representing colors in CSS is with RGB values. RGB is a combination of three numbers, ranging from 0 to 255, that represent the spectrum of red, green, and blue, respectively.
Another common way for writing web color values is with hexadecimal values. They are similar to RGB in that they are technically composed of three values. The difference, however, is that each component of a hexadecimal value is always 2-characters-long. With toString(), we can convert a sole RGB value to its base-16 hex-equivalent by passing in 16 as our radix value:
let rValue = 240
let gValue = 133
let bValue = 79
rValue = rValue.toString(16) // --> "f0"
gValue = gValue.toString(16) // --> "85"
bValue = bValue.toString(16) // --> "4f"
let hexValue = rValue + gValue + bValue
console.log(hexValue) // --> "f0854f"
When you pass in 16 to toString(), it will expect the value-to-be-stringified to be an integer. It takes the integer and translates it into a 2-character value.
There is something important to point out when converting to base-16 with toString(). In order for an RGB value to be converted correctly, it must fall between 0 and 255. Otherwise, the function will return a confusing result.
Wrap-Up
This article isn't intended to veer you away from learning how these conversions work algorithmically (you should!). It's about demonstrating some interesting use cases for a popular JavaScript function. The toString() function, at the end of the day, returns just a string representation of the object-like value it is being invoked upon.
Thank you for reading and I hope you found this to be interesting and, perhaps, useful.
Keep on Coding.
References
Everything About JavaScript Objects by Deepak Gupta --> (Medium Article)