DEV Community

Barret Blake
Barret Blake

Posted on • Originally published at barretblake.dev on

Function Friday: Binary, DataUri, UriComponent, and Base64 Conversion Functions

This time I’m going to delve into conversion functions for base64 and binary. Both are typically used to convert binary files such as images and zip files back and forth between formats that various connectors need in order to process them. It’s also sometimes used to generate hashes used for checksums, certificates, and encryption.

base64

The base64 function is used to convert a string into a base64 encoded version of a string. The pattern is:

base64('<value>')
Enter fullscreen mode Exit fullscreen mode

and an example would be:

base64('hello') // returns "aGVsbG8="
Enter fullscreen mode Exit fullscreen mode

base64ToBinary

This function is used to convert a base64 encrypted string into a binary format. The format is as follows:

base64ToBinary('<base64 encoded string>')
Enter fullscreen mode Exit fullscreen mode

An example of where this would be useful is if you have an image that was attached to an email, where it would be encoded as base64 text and you want to save that attachment to a file. If you didn’t have a tool to support saving the attachment from the email, this would let you accomplish that.

base64ToString

If you have a base64 encoded string and you want to convert it into its ASCII string contents, this function would be used. The format is:

base64ToString('<base64 encoded string>')
Enter fullscreen mode Exit fullscreen mode

If we take our example from the base64 function above

base64ToString('aGVsbG8=') // returns "hello"
Enter fullscreen mode Exit fullscreen mode

binary

The binary function is the opposite of the base64ToBinary function. It takes a binary version of a string and encodes it into base64 text. The format is:

binary('<binary data>')
Enter fullscreen mode Exit fullscreen mode

This is extremely useful when taking the return data from an HTTP action that sends back an image or video and then converts it into the base64 version of the string.

decodeBase64

This is a deprecated function and has been replaced with the base64ToString function.

dataUri

This function is used to convert a string into a uniform resource identifier (URI) version of that string. The format is as follows:

dataUri('<value>')
Enter fullscreen mode Exit fullscreen mode

And an example would be:

dataUri('hello') // returns "data:text/plain;charset=utf-8;base64,aGFsbG8="
Enter fullscreen mode Exit fullscreen mode

You can see this is similar to the base64 function, but it includes the extra information that would be needed as part of building a URI for embedding into HTML or CSS or similar formats.

dataUriToBinary

This function will take a full data URI and convert it to binary string format. The format is as follows:

dataUriToBinary('<value>')
Enter fullscreen mode Exit fullscreen mode

And as an example:

dataUriToBinary('data:text/plain;charset=utf-8;base64,aGFsbG8=') // returns a very long string of binary (e.g. "011......101")
Enter fullscreen mode Exit fullscreen mode

dataUriToString

Similar to dataUriToBinary, this converts the data URI version of a string into a normal string. The format is as follows:

dataUriToString('<value>')
Enter fullscreen mode Exit fullscreen mode

Using once more our hello example:

dataUriToString('data:text/plain;charset=utf-8;base64,aGVsbG8=') // returns "hello"
Enter fullscreen mode Exit fullscreen mode

decodeDataUri

While not deprecated, it is recommended you use the newer version of this function: dataUriToBinary

uriComponent

This function returns the URI encoded version of a string. This is most often used for making sure web addresses or other components of a URL such as querystring parameters are being passed safely (for example data that contains spaces or special characters). The format is as:

uriComponent('<value>')
Enter fullscreen mode Exit fullscreen mode

An example:

uriComponent('https://barretblake.dev') //returns "https%3A%2F%2Fbarretblake.dev"
Enter fullscreen mode Exit fullscreen mode

uriComponentToBinary

This takes a URI encoded string and returns the binary string format. The pattern is:

uriComponentToBinary('<value>')
Enter fullscreen mode Exit fullscreen mode

uriComponentToString

This function is to take a URI encoded string and convert it into a plain string format. The format is as follows:

uriComponentToString('<value>')
Enter fullscreen mode Exit fullscreen mode

And with our previous example:

uriComponentToString('https%3A%2F%2Fbarretblake.dev') // returns https://barretblake.dev
Enter fullscreen mode Exit fullscreen mode

Conclusion

This group of functions comes in most useful when passing data of different types back and forth between various endpoints. Sometimes you need plain text. Sometimes you need binary text. And sometimes you need base64 encoded text. These functions help you get your data from one to the other quite easily.

The post Function Friday: Binary, DataUri, UriComponent, and Base64 Conversion Functions first appeared on Barret Codes.

Top comments (0)