可以像这样使用 shorthand 条件来构建字符串吗？

Question

我正在尝试根据下拉选择向我的 URL 添加一些参数，我想使代码尽可能简短，所以我正在尝试为留下的参数构建一个字符串删除任何空白的变量，这样它们就不会附加到 URL 字符串中。以下是我尝试过的：

$(function() {
  var product = 'shirt',
      size = 'large',
      color = 'blue',
      custom = '';
      
  var urlParams = (product === '') ? '' : 'product=' + product + '&' + (size === '') ? '' : 'size=' + size + '&' + (color === '') ? '' : 'color=' + color + '&' + (custom === '') ? '' : 'custom=' + custom;
  
  console.log(urlParams);
  
  // Go to results page
  // location.href = 'results?' + urlParams;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

urlParams 的预期输出是：

product=shirt&size=large&color=blue

不幸的是，这 returns 是一个空字符串。是否可以像这样构建参数？或者有更好的方法来完成这个吗？

Answer 1

括号很重要！

问题是，您没有研究旧的。 custom === "" 变得真实，然后你的整个情况就崩溃了。更好的方法是：

(function() {
  var product = 'shirt',
    size = 'large',
    color = 'blue',
    custom = '';

  var urlParams = ((product === '') ? '' : 'product=' + product) + '&' + ((size === '') ? '' : 'size=' + size) + '&' + ((color === '') ? '' : 'color=' + color) + '&' + ((custom === '') ? '' : 'custom=' + custom);

  console.log(urlParams);

  // Go to results page
  // location.href = 'results?' + urlParams;
})();

现在您可以看到有 & 个。更好的版本是：

(function() {
  var product = 'shirt',
    size = 'large',
    color = 'blue',
    custom = '';

  var urlParams = ((product === '') ? '' : 'product=' + product) + '&' + ((size === '') ? '' : 'size=' + size) + '&' + ((color === '') ? '' : 'color=' + color) + '&' + ((custom === '') ? '' : 'custom=' + custom);
  urlParams = urlParams.replace(/^\&+|\&+$/g, '');
  console.log(urlParams);

  // Go to results page
  // location.href = 'results?' + urlParams;
})();

最好使用数组和 .join()s。

(function() {
  var product = 'shirt',
    size = 'large',
    color = 'blue',
    custom = '';

  var urlParams = [
    ((product === '') ? '' : 'product=' + product),
    ((size === '') ? '' : 'size=' + size),
    ((color === '') ? '' : 'color=' + color),
    ((custom === '') ? '' : 'custom=' + custom)
  ];
  urlParams = urlParams.join("&").replace(/^\&+|\&+$/g, '');
  console.log(urlParams);

  // Go to results page
  // location.href = 'results?' + urlParams;
})();

Answer 2

您可以检查该值并对格式化字符串进行逻辑与运算。

var urlParams = (product && 'product=' + product + '&') +
                (size && 'size=' + size + '&') +
                (color && 'color=' + color + '&') +
                (custom && 'custom=' + custom);

另一种方法是使用对象、过滤真值并使用模板字符串构建格式化字符串。

function getString(object) {
    return Object
        .entries(object)
        .filter(([, v]) => v)
        .map(([k, v]) => `${k}=${v}`)
        .join('&');
}

var product = 'foo', 
    size = '42',
    color = '',
    data = { product, size, color };
    
    
console.log(getString(data))

Answer 3

const params = {
    product: 'shirt',
    size: 'large',
    color: '',
    custom: null
}
const valid = p => k => typeof p [k] === 'string' && p [k].length > 0
let queryString = Object.keys (params).filter (valid (params)).map (k => `${k}=${params[k]}`).join ('&')

console.log (queryString)

可以像这样使用 shorthand 条件来构建字符串吗？

Possible to build a string using shorthand conditionals like this?

javascript

conditional-operator