Qual é a maneira mais elegante de limitar um número a um segmento?

Digamos x, ae bsão números. Eu preciso limitar xos limites do segmento [a, b].

Eu sei escrever Math.max(a, Math.min(x, b)), mas não acho que seja muito fácil de ler. Alguém tem uma maneira inteligente de escrever isso de uma maneira mais legível?

A maneira como você faz isso é bastante padrão. Você pode definir uma clampfunção de utilitário :

/**
 * 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);
};

(Embora a extensão de built-ins de idiomas geralmente seja mal vista)

uma abordagem menos orientada à "matemática", mas também deve funcionar, dessa forma, o teste </> é exposto (talvez mais compreensível que o minimax), mas realmente depende do que você quer dizer com "legível"

function clamp(num, min, max) {
  return num <= min ? min : num >= max ? max : num;
}

Atualização para o ECMAScript 2017:

Math.clamp(x, lower, upper)

Mas observe que, atualmente, é uma proposta do Estágio 1 . Até que ele seja amplamente suportado, você pode usar um polyfill .

Math.clip = function(number, min, max) {
  return Math.max(min, Math.min(number, max));
}

Isso não quer ser uma resposta "apenas use uma biblioteca", mas caso você esteja usando o Lodash, você pode usar .clamp:

_.clamp(yourInput, lowerBound, upperBound);

De modo a:

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

Aqui está sua implementação, extraída da fonte Lodash :

/**
 * 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;
}

Além disso, vale a pena notar que o Lodash disponibiliza métodos únicos como módulos autônomos; portanto, caso você precise apenas desse método, basta instalá-lo sem o restante da biblioteca:

npm i --save lodash.clamp

Se você conseguir usar as funções de seta es6, também poderá usar uma abordagem de aplicativo parcial:

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

Se você não deseja definir nenhuma função, escrevê-la como Math.min(Math.max(x, a), b)essa não é ruim.

No espírito da sensualidade das flechas, você pode criar um micro grampo / restrição / portão / & c. função usando parâmetros de descanso

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

Depois é só passar em três valores

clamp(100,-3,someVar);

Ou seja, novamente, se por sexy, você quer dizer 'curto'

Isso expande a opção ternária para if / else que minified é equivalente à opção ternária, mas não sacrifica a legibilidade.

const clamp = (value, min, max) => {
  if (value < min) return min;
  if (value > max) return max;
  return value;
}

Minimize para 35b (ou 43b se estiver usando function):

const clamp=(c,a,l)=>c<a?a:c>l?l:c;

Além disso, dependendo de quais ferramentas de perf ou navegador você usa, você obtém vários resultados, se a implementação baseada em matemática ou a implementação ternária é mais rápida. No caso de aproximadamente o mesmo desempenho, eu optaria pela legibilidade.

Meu favorito:

[min,x,max].sort()[1]