I am experienced in Python, but relatively new to the Javascript language. I know in Python, if I want to substitute a variable into a string (for instance) I could do it this way:
s = "%s:%s" % (mins, secs)
However, I can't find an equivalent way to substitute values in Javascript. Does something like this exist, or am I going about this the wrong way?
Not available in ES5, but it is available in ES6:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Keep in mind this might not work right in the browser across the board-- you'll probably need to use something like Babel to transpile your code to ES5.
Related
I have a function which runs string as javascript code through eval(). It works fine if the string is es5 but doesn't work for es6. I know babel can transport es6 to es5 but most of them use cases are done in compile stage. How can I use babel programmatically?
Babel has an API.
I assume you can do something like this:
eval(babel.transform(code, options).code)
However I would strongly reconsider that! First, eval is usually a very, very dangerous thing, and next babel is huge. You don't want to deliver that to a browser if you don't have to.
I have the following code that basically gets some JSON data, looks for the keys with "servergenre", and saves the results in an array.
This is a follow up of this question.
let result = [];
Object.keys(data).forEach( key => {
if(/servergenre/.test(key)){
result.push(data[key])
}
});
Even though the code is working correctly, in some editors it raises syntactic errors:
"key": unsolvable variable or type key
"=>": expression expected
"if( / server...": formal parameter name expected
")){": , expected
"});": statement expected
Here is an image to show you where the errors are:
As I said the code is working fine, I just need it to be fixed or another approach to get rid of the errors.
Furthermore, many compressors and minifiers do not support this bit of code. So I can’t minify it.
Thanks in advance.
ES2015, formerly known as ES6, is a more recent version of JavaScript, which introduces features such as the => syntax for functions you are using.
Not all features of ES2015 are fully supported in all browsers, so many people who use it pass it through a compiler (“transpiler”) first to convert it to ES5, which is supported by all browsers. Babel is one such transpiler. But if you are only targeting newer browsers, that would explain why the => syntax is working for you.
You just need to change your editor settings to understand that syntax. Exactly how you do that depends on what text editor you are using. It could be that your editor's built-in JavaScript mode doesn't know how to read ES2015 syntax, and you need to either upgrade your editor or install a third-party plugin that provides an updated error-checker. Or it could be that your editor supports both ES5 and ES2015, and it thinks you are trying to write your project only in ES5. In this case you just need to go to the settings and tell your editor that you mean for this project to use ES2015 (or ES2016, which is currently the most recent version).
Fat arrows are ES6 syntax. If that causes trouble, just write good old ES5 :
let result = [];
Object.keys(data).forEach( function(key) {
if(/servergenre/.test(key)){
result.push(data[key])
}
});
I know that feature detection works for sniffing objects and methods (things like JSON, querySelector,...) but what about new syntax? like default function parameters?
The problem is that they cause a syntax error that cannot be caught.
Any insight on this? apart from browser and version sniffing which is mostly unreliable.
And if there is no way, does this mean we can not use new features! what are they for then (maybe for use after 10 years !)
Try to create a function within a try-catch block.
var code = '"forgotten close quote';
var valid = true;
try {
new Function(code);
}catch(exc) {
valid = false;
}
Here, trying to put "forgotten close quote into a function will fail due to a syntax error, which is then caught and will set valid to false.
As icktoofay demonstrates, there are ways to check for syntactical features without causing a syntax error, but even if you do that, what would you do with that information? You would need to have multiple versions of your code depending on the supported syntax features and need to do dynamic loading of your scripts for no real purpose.
To address your last question, you don't necessarily have to wait to use the new features. You can use a JavaScript-next to JavaScript-of-today compiler like traceur-compiler, or Typescript, which includes future JavaScript features and compiles into browser-friendly JavaScript.
There is no reliable way to check general support for syntax errors.
However there is plenty that can be used in NodeJS, today.
Also, there's nothing preventing you from using a transpiler, like Traceur, to write fancy JS and have it come out ES5-compatible on the other side.
I've tried some of the editors/IDEs regularly recommended for coding JavaScript (Aptana, WebStorm, ...) but none of them has a satisfying autocomplete functionality. I'm probably spoiled by Microsoft's IntelliSense for .NET. There is some JavaScript-IntelliSense in WebDeveloper, but that seems to be a stripped-down version. The best I've found so far is WebStorm, but its code completition is easily distracted by imported libraries (offering hundreds of suggestions) and identical function names.
Did I miss an editor/IDE that uses refactoring (or something else) to offer proper code completition, so that it really "knowns" what that variable-name stands for, I just put a dot behind? Or is something like this on its way?
I always recommend Komodo Edit from ActiveState (now up to version 6, with support for HTML 5 and CSS3 as well as recent versions of Javascript, PHP, etc.) Note that you may have to install addons for the languages you're working in, but you should find them through the Mozilla-like Addon manager.
Also supports jQuery and even lets you use jQuery (along with vanilla Javascript or Python) in its powerful macro IDE.
Code completion example:
<script type="application/x-javascript">
var obj = {};
obj.personnel = [{firstName:"John", lastName:"Brick", age:43},
{firstName:"Jane", lastName:"Motte", age:26}
];
// now type obj. and code completion immediately offers you "personnel"
// note: file must be saved for the app to find all members of declared
// variables, but I save about every 10 seconds so it's not a problem
</script>
The best I've found so far is
WebStorm, but its code completition is
easily distracted by imported
libraries (offering hundreds of
suggestions) and identical function
names.
This comment confuses me. If you import the libraries, and your code is using them, why is it bad to include the function names in the code completion suggestions? Wouldn't you want to have jQuery's functions included if you're using it?
If you're using Microsoft's IntelliSense with jQuery, does it stick to its guns and only show JavaScript core functions? Sounds limited to me, unable to be smart when I add libraries.
Or is something like this on it's [sic] way?
It sounds to me like you want a clairvoyant interface. I don't think it is on the way anytime soon.
By the way, "it's" == "it is"; "its" is the possessive.
I have an ASP page written in JScript that sends e-mails using CDO.Message. For specifying an SMTP server (and other options) I'm doing something like this:
mail.Configuration.Fields.Item(
"http://schemas.microsoft.com/cdo/configuration/smtpserver") =
"smtp.example.com";
Now, here comes the catch. I have this code in a stand-alone include file that I include in an HTML page as JavaScript so that I can run unit tests against it in a browser (using JsUnit etc.). I have JavaScript mock objects (Server, Request, etc.) that create a mock ASP environment for the included JScript code. The only problem I have left is with the CDO.Message option setting. Since the f(x) = y syntax that's used in the above code excerpt is not valid JavaScript (invalid left-hand operand), I can't run this piece of code (as it is) within a browser. I'm currently simply bypassing it in my unit test with a conditional that detects whether the environment is truly ASP.
I don't think that there's a JavaScript workaround to this. I'm looking for an alternative syntax (that may use the ActiveX interfaces differently) to setting CDO.Message options that would also be syntactically valid JavaScript.
I figured out the answer when looking at the C++ code example at http://msdn.microsoft.com/en-us/library/ms526318(EXCHG.10).aspx.
The solution is to make the assignment explicitly to the Value property:
mail.Configuration.Fields.Item(
"http://schemas.microsoft.com/cdo/configuration/smtpserver").Value =
"smtp.example.com";
This way, the code above is valid JavaScript than can be tested with a mock Configuration object.
I've been having the same problem when writing server-side Javascript for IIS, That f(x) = y syntax was failing in my IDE's syntax checker. The solution I found helpful was JScript conditional comments like so:
f(x)/*#cc_on#if(0)*/[0]/*#end#*/ = y;
It puts the subscript index [0] on the end except when running in Microsoft's JScript engine. But, admittedly my solution is a bit hacky. I think in most cases yours is cleaner, so thanks for sharing it.
-Simon