What is the most elegant way to bite a number in a segment?

Say x , a and b are numbers. I need to limit x to the boundaries of the segment [a, b] .

I can write Math.max(a, Math.min(x, b)) , but I don’t think it is very easy to read. Does anyone have a smart way to write this in a more readable way?

+67
javascript coding-style
Jul 10 2018-12-12T00:
source share
9 answers

The way you do this is pretty standard. You can define the function of the clamp utility as described here :

 /** * Returns a number whose value is limited to the given range. * * Example: limit the output of this computation to between 0 and 255 * (x * 255).clamp(0, 255) * * @param {Number} min The lower boundary of the output range * @param {Number} max The upper boundary of the output range * @returns A number in the range [min, max] * @type Number */ Number.prototype.clamp = function(min, max) { return Math.min(Math.max(this, min), max); }; 

(Although the extension of language built-in functions is usually not approved)

+117
Jul 10 2018-12-12T00:
source share

a less math-oriented approach, but should also work this way, / "> (perhaps more understandable than minimax), but it really depends on what you mean by" readable "

 function clamp(num, min, max) { return num <= min ? min : num >= max ? max : num; } 
+36
Jul 10 '12 at 9:10
source share

Update for ECMAScript 2017:

 Math.clamp(x, lower, upper) 

But note that today is stage 1 of the proposal . Until it is widely supported, you can use polyfill .

+13
Sep 13 '16 at 19:50
source share
 Math.clip = function(number, min, max) { return Math.max(min, Math.min(number, max)); } 
+9
Jul 10 2018-12-12T00: 00Z
source share

In the spirit of sexuality arrows, you can create a micro clamp / restrain / gate / & C. function using the rest parameters

 var clamp = (...v) => v.sort((a,b) => ab)[1]; 

Then just pass the three values

 clamp(100,-3,someVar); 

That is, again, if by sex you mean "short"

+3
Apr 26 '17 at 18:15
source share

This does not mean that you want to use the answer "just-use-a-library", but if you use Underscore / Lodash, you can use .clamp :

 _.clamp(yourInput, lowerBound, upperBound); 

So that:

 _.clamp(22, -10, 10); // => 10 

Here is its implementation, taken from Lodash source :

 /** * The base implementation of `_.clamp` which doesn't coerce arguments. * * @private * @param {number} number The number to clamp. * @param {number} [lower] The lower bound. * @param {number} upper The upper bound. * @returns {number} Returns the clamped number. */ function baseClamp(number, lower, upper) { if (number === number) { if (upper !== undefined) { number = number <= upper ? number : upper; } if (lower !== undefined) { number = number >= lower ? number : lower; } } return number; } 

In addition, it is worth noting that Lodash makes individual methods available as stand-alone modules, so if you only need this method, just install it without the rest of the library:

 npm i --save lodash.clamp 
+2
Nov 03 '16 at 17:36
source share

If you can use the es6 arrow functions, you can also use the partial application method:

 const clamp = (min, max) => (value) => value < min ? min : value > max ? max : value; clamp(2, 9)(8); // 8 clamp(2, 9)(1); // 2 clamp(2, 9)(10); // 9 or const clamp2to9 = clamp(2, 9); clamp2to9(8); // 8 clamp2to9(1); // 2 clamp2to9(10); // 9 
+1
Nov 02 '17 at 20:46 on
source share

You can also use this reusable number-clamping component , which returns a number whose value is limited to a given range.

Example:

 clamp(50, 5, 10) // => 5 

How it works:

 function clamp(value, min, max) { if (value < min) { return min; } if (value > max) { return max; } return value; } 
0
Jun 05 '17 at 8:26
source share

My favorite:

 [min,x,max].sort()[1] 
-one
Mar 04 '16 at 19:15
source share



All Articles