Basics of Javascript · String · raw() (method)
This article is a transcript of my free youtube series about basics of web development. If you prefer watching over reading, feel free to visit my channel “Dev Newbs”.
Hello to all the great dev newbs out there! This episode of the String methods will be raw. I meant it will be about method raw(). Haha…gotcha!
The raw() method is a static method just like methods fromCharCode() and fromCodePoint().
We invoke it by typing “String.raw” and we provide it with the parameters.
This method allows us to get the raw string form of template literals. In other words, we get variable substitutions, but escape characters are not processed. They are used raw. Hence the name, I guess.
const filePathRaw = String.raw`C:\Development\Strings\nevergonnagiveyouup.html`;
const filePath = `C:\Development\Strings\nevergonnagiveyouup.html`;// The file was uploaded from:
// C:\Development\Strings\nevergonnagiveyouup.html// backslashes from Windows path are not processed
`The file was uploaded from: ${filePathRaw}`// backslashes are processed (\n is processed as new line)
`The file was uploaded from: ${filePath}`// The file was uploaded from: C:DevelopmentStrings
// evergonnagiveyouup.html
In the first case, we used String.raw, which disables processing. So all the backslashes and characters following them are treated like ordinary characters. This comes handy when you deal with paths to files or folders.
I purposely put “\n” into the example. In the second case, you can see that the character is processed as a new line character and it is shown as that on the output.
Okay, I actually skipped parameters part of the theory, so here it goes. This method can be invoked in two different ways.
First one requires two parameters. One is a well-formed template call site object, which I will show in the example below. And the second is actually one or more substitution values.
Alternatively, you can invoke the method with only one parameter and that is template literal string, which ideally contains also some substitutions of variables. Otherwise, it would be kind of unnecessary.
One more thing to cover — if the first argument is not a well-formed object, the TypeError is thrown.
Great. Specification phase done, let’s jump to more examples.
let str1 = `Hi\n${2+3}!`;
let raw1 = String.raw`Hi\n${2+3}!`;`${str1} (${str1.length})` // Hi
// 5! (5)
`${raw1} (${raw1.length})` // Hi\n5! (6)let str2 = `Hi\u000A!`;
let raw2 = String.raw`Hi\u000A!`;`${str2} (${str2.length})` // Hi
// ! (4)
`${raw2} (${raw2.length})` // Hi\u000A! (9)const myVar = "DEV_NEWBS";// equals to `foo${2+3}bar${'Java' + 'Script'}baz`
let raw3 = String.raw
(
{
raw: ['foo', 'bar', 'baz', 'fye']
},
2 + 3,
'Java' + 'Script',
myVar
);raw3 // foo5barJavaScriptbazDEV_NEWBSfye
// equals to `t${0}e${1}s${2}t`:
String.raw({ raw: 'test' }, 0, 1, 2) // t0e1s2t
This method is mostly used with template literals. The first syntax is rarely used and honestly even the examples do not show exactly what is the added value to use it in the first place.
But we will cover it anyway.
First two examples show the difference that is caused by using String.raw. Mostly it is what we already mentioned — processing of special escape characters is disabled, but variable substitution is enabled. So far so good.
Last two examples show us the rare syntax in real life. It’s not that impressive since all it does is doable with standard operations or a little bit of string magic and concat() method. We basically provide any iterable item — array, object, even string and put additional values between individual items of the iterable. As I said. Not that impressive. But then again. Maybe I don’t understand it. That’s also possible.If you happen to find a use case for it, let me know and I will happily update this article.
Ok, so that was the static method raw(). And this is my goodbye to you.
Thank you for the attention given and we will see each other next time.
