Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I think that your question can't have <em>only one</em> correct answer. There are many ways of writing long strings in JavaScript and it's mostly the matter of taste which one you choose. I can just describe here my point of view on the subject.</p> <p>First of all you can use <code>maxlen</code> option of JSlint to change the default line length to any value which you like. For example</p> <pre><code>/*jslint maxlen: 130 */ </code></pre> <p>But I think you know the setting already.</p> <p>I suppose that you can use some Minifiers of the JavaScript code for productive usage of your JavaScripts (like <a href="https://developers.google.com/closure/compiler/" rel="nofollow">Closure Compiler</a>, <a href="http://ajaxmin.codeplex.com/" rel="nofollow">Microsoft Ajax Minifier</a> or some other). How you can easy verify on <a href="http://closure-compiler.appspot.com/home" rel="nofollow">the page</a> the code</p> <pre><code>// ==ClosureCompiler== // @compilation_level SIMPLE_OPTIMIZATIONS // @output_file_name default.js // ==/ClosureCompiler== // ADD YOUR CODE HERE function hello(name) { var test = '&lt;div&gt;' + '&lt;h1&gt;Foo&lt;/h1&gt;' + '&lt;p&gt;Lorem ipsum&lt;/p&gt;' + '&lt;/div&gt;'; return test + name; } hello('New user'); </code></pre> <p>will be minified to</p> <pre><code>function hello(a){return"&lt;div&gt;&lt;h1&gt;Foo&lt;/h1&gt;&lt;p&gt;Lorem ipsum&lt;/p&gt;&lt;/div&gt;"+a}hello("New user"); </code></pre> <p>and all the string constants will be concatenated. So you can format the code with the long string constants mostly so, that <em>the code could be better read</em>. The minifier will do the rest of the work for you.</p> <p>In the case of long URLs you can break long strings on any place which you find best from a logical point of view (I think it will always be on some <code>'/'</code> character). In most practical cases you have some <code>baseURL</code> which will be appended. So you can define the common project settings somewhere at the beginning of your file or in the separate JavaScript file</p> <pre><code>var baseLoremUrl = 'http://example.com/foo/bar/baz/fizz/buzz/lorem/'; </code></pre> <p>and use it later as</p> <pre><code>'&lt;a href="' + baseLoremUrl + 'ipsum/etc/' + '"&gt;Click me!&lt;/a&gt;' </code></pre> <p>If you have parameters which should be appended to URL like</p> <pre><code>'http://example.com/foo/bar/baz/fizz/buzz/lorem?x=123&amp;y=ABC' </code></pre> <p>I use always</p> <pre><code>baseLoremUrl + '?' + $.params({x: 123, y: 'ABC'}) </code></pre> <p>to make the code more readable from one side and to be sure that all parameters will be correctly encoded with respect of <a href="http://www.w3schools.com/jsref/jsref_encodeURIComponent.asp" rel="nofollow">encodeURIComponent</a> if it's needed.</p> <p>All above are the rules which I try to follow myself during writing my JavaScript code.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload