JavaScript string manipulation with certain logic in it

Question

How would I make this code look less ugly?

// we are looping over an array of images // width is a parameter passed to the current function // // the resulting string looks like this: "30px 0" // (it's a tool that returns coordinates for a CSS sprite) // when iterating over the first item, we don't need // to add "-" and "px" to X coordinate result.push( ( i === 0 ? "0" : "-" + i * ( ( is2PixelRatio ? width / 2 : width ) + 10 ) + "px" ) + " 0" ); 

Answer 1

Minor upgrades, nice idea for the prepop result Raynos

result = ["0 0"]; // Outside of loop // ... if (is2PixelRatio) width /= 2; width += 10; // [Insert magik number explanation here] result.push( -(i * width) + "px 0" ); // Negative numbers will convert to "-30" 

Answer 2

// old var result = [], width, is2PixelRatio; for (var i = 0; i < 10; i++) { width = i; result.push( ( i === 0 ? "0" : "-" + i * ( ( is2PixelRatio ? width / 2 : width ) + 10 ) + "px" ) + " 0" ); } console.log(result); // new var result2 = ["0 0"], width, is2PixelRatio = true; for (var i = 1; i < 10; i++) { width = i; result2.push("-" + i*(width+10) + "px 0"); } if (is2PixelRatio) { result2 = result2.map(function(val) { return val.replace(/[\-]\d+/, function(v) { return v / 2; }); }); } console.log(result2); 

Basically inject the default value into the array at the start. Then do that if is2PixelRatio logic at the end on the entire array.

Live example.

Uses Array.prototype.map