putting javascript function in a string

Question

I was wondering if there is any way to put this in a string.

function format(e) {
 if (!e.id) return e.text;
 if (e.avatar === "defaultAvatar.jpg") {
 return "<div class='select2TemplateImg'><span class='helper'></span> <img class='flag' src='" + baseURL + "uploads/users/d/defaultAvatar.jpg'/></div><div class='select2TemplateText'><p> " + e.text + "</p><p>" + e.username + "</p><p>" + e.cnic + "</p></div>"
 } else if (e.avatar != "defaultAvatar.jpg") {
 return "<div class='select2TemplateImg'><span class='helper'></span> <img class='flag' src='" + baseURL + "uploads/users/" + e.userid + "/" + e.avatar + "'/></div><div class='select2TemplateText'><p> " + e.text + "</p><p>" + e.username + "</p><p>" + e.cnic + "</p></div>"
 }
}

like

 var variableName = "FUNCTION-HERE";

Problem is in that function i have used both double quotes and single quotes and if i try to put it inside the string, then there is no support of triple quotes in javascript and i can not close the above function in simple javascript quotes (single or double) everything gets messed up.

Any idea how to achieve it?

• Sirko: How about escaping like "\""?
• Satpal: Why do you want that?
• Sizzling Code: @Satpal i know it sounds crazy but i want to send it to some other function as a parameter. xD.
• Amadan: @SizzlingCode: Then send a function as a parameter. There is almost no cause for having JavaScript as a string.
• user3459110: Javascript functions are first-class functions. This means that they can be treated as variables, passed around as arguments directly etc. Now lookup XY Problem and avoid that in future.

Answer 1

Like this?

var variableName = 'function format(e) {\
 if (!e.id) return e.text;\
 if (e.avatar === "defaultAvatar.jpg") {\
 return "<div class=\'select2TemplateImg\'><span class=\'helper\'></span> <img class=\'flag\' src=\'" + baseURL + "uploads/users/d/defaultAvatar.jpg\'/></div><div class=\'select2TemplateText\'><p> " + e.text + "</p><p>" + e.username + "</p><p>" + e.cnic + "</p></div>"\
 } else if (e.avatar != "defaultAvatar.jpg") {\
 return "<div class=\'select2TemplateImg\'><span class=\'helper\'></span> <img class=\'flag\' src=\'" + baseURL + "uploads/users/" + e.userid + "/" + e.avatar + "\'/></div><div class=\'select2TemplateText\'><p> " + e.text + "</p><p>" + e.username + "</p><p>" + e.cnic + "</p></div>"\
 }\
}';

• Amadan: JavaScript does not support multiline strings; you'd need to put it all in one line with \n, end each line with \n\ (without that last space :( ), or use concatenation.
• Ruben Nagoga: Javascript do support multiline variable if you add \ in the end of each line. I think it is not so important to keep line formatting in function, at least it was out of question scope.
• Amadan: That was the point of my \n\ - \n to force a newline content, \ (without space) to ignore the newline for code. I meant there is no notation that would directly map newlines in string literals to newlines in strings. Also, your original question before you edited it was a syntax error, which prompted me to comment - you added the backslashes only afterwards.
• user3459110: Manual escaping of such code should never ever be encouraged. You are bound to make a mistake sometime or the other.

Answer 2

Use toString()

var myFunc = function(){
 console.log("here are double quotes", 'and here single');
}
console.log(myFunc.toString());

Or String (as an operator)

var myFunc = function(){
 console.log("here are double quotes", 'and here single');
}
console.log(String(myFunc));

It also takes 2 characters less than the previous version. It is a better method, IMHO.

A hackish way would be as following:

var myFunc = function(){
 console.log("here are double quotes", 'and here single');
}
console.log('' + myFunc);
//or 
console.log(myFunc + ''); //both are same

It works because of Javascript's automatic type casting. We are basically appending an empty string to the function which causes the function to be automatically cast to a string. It then adds the empty string but since the string is empty, no actual change is made to the string returned by casting the function.

Use this ONLY when golfing or in overly simple cases. It is not considered good practice.

Further, there are better ways to store functions, like wrapping them in an object. Or if you wanna pass them as arguments, you can do that directly by passing the function itself (without the parenthesis) since functions in javascipt are first class citizens.

• Sizzling Code: Thankyou, I liked your method, i didnt had to do any escaping :) all i did in end was var variableName = myFunc.toString(); Its hard to go check line one by one for escaping. and i am new to it also. Thankyou again.

Answer 3

you can do it by escaping using '\'

var v = "function format(e) { if (!e.id) return e.text;if (e.avatar === \"defaultAvatar.jpg\") {return \"<div class='select2TemplateImg'><span class='helper'></span> <img class='flag' src='\" + baseURL +\"uploads/users/d/defaultAvatar.jpg'/></div><div class='select2TemplateText'><p> \" + e.text + \"</p><p>\" + e.username + \"</p><p>\" + e.cnic + \"</p></div>\"} else if (e.avatar != \"defaultAvatar.jpg\") {return \"<div class='select2TemplateImg'><span class='helper'></span> <img class='flag' src='\" + baseURL + \"uploads/users/\" + e.userid + \"/\" + e.avatar + \"'/></div><div class='select2TemplateText'><p> \"+ e.text + \"</p><p>\" + e.username + \"</p><p>\" + e.cnic + \"</p></div>\"}}";

Answer 4

While this may not be what you directly asked about, you can also directly convert code into string:

function format(e) {
 if (!e.id) return e.text;
 if (e.avatar === "defaultAvatar.jpg") {
 return "<div class='select2TemplateImg'><span class='helper'></span> <img class='flag' src='" + baseURL + "uploads/users/d/defaultAvatar.jpg'/></div><div class='select2TemplateText'><p> " + e.text + "</p><p>" + e.username + "</p><p>" + e.cnic + "</p></div>"
 } else if (e.avatar != "defaultAvatar.jpg") {
 return "<div class='select2TemplateImg'><span class='helper'></span> <img class='flag' src='" + baseURL + "uploads/users/" + e.userid + "/" + e.avatar + "'/></div><div class='select2TemplateText'><p> " + e.text + "</p><p>" + e.username + "</p><p>" + e.cnic + "</p></div>"
 }
}
var someVariable = format.toString();

• user3459110: @AnikIslamAbhi that is not true. toString() returns the entire function as it is, including the function name.
• user3459110: Also, I see this is the same answer as mine, but was posted earlier ;p I didn't mean to plagiarize. Sorry for that.
• Amadan: @AwalGarg: No worries :)
• Sizzling Code: It works. I tried @AwalGarg Answer and it worked like a charm.

Answer 5

You can use + on the end of each sting if you want it formatted nicely in your file, then escape your double quotes with \

var variableName = 'function format(e) {'+
'if (!e.id) return e.text;'+
'if (e.avatar === "defaultAvatar.jpg") {'+
 'return "<div class=\'select2TemplateImg\'><span class=\'helper\'></span> <img class=\'flag\' src=\'" + baseURL + "uploads/users/d/defaultAvatar.jpg\'/></div><div class=\'select2TemplateText\'><p>"+ e.text +"</p><p>" + e.username + "</p><p>" + e.cnic + "</p></div>"'+
'} else if (e.avatar != "defaultAvatar.jpg") {'+
 'return "<div class=\'select2TemplateImg\'><span class=\'helper\'></span> <img class=\'flag\' src=\'" + baseURL + "uploads/users/" + e.userid + "/" + e.avatar + "\'/></div><div class=\'select2TemplateText\'><p> " + e.text + "</p><p>" + e.username + "</p><p>" + e.cnic + "</p></div>"'+
'}';

Personally I feel dirty doing it like that but it gets the job done.

• Felix Kling: What you posted is invalid JS. (as you can tell by the syntax highlighting)
• AVDW: ah I forgot to escape characters. That should work now.