Как вы оформляете (большое) назначение короткого замыкания в JavaScript?

Question

представьте, что у вас есть эта строка:

var result = content['aPossbileValue'] || $el.data('root-path') + content.type +  '/something/' + content.slug;

Длина строки слишком велика, поэтому мне интересно, как я могу улучшить это?

Возможные варианты:

var result = content['aPossbileValue'] 
  || $el.data('root-path') + content.type + '/something/' + content.slug;

var result = content['aPossbileValue'] ||
             $el.data('root-path') + content.type + '/something/' + content.slug;

var result = content['aPossbileValue'] 
             || $el.data('root-path') + content.type + '/something/' + content.slug

А может, это считается плохой практикой!

дайте мне знать ваше мнение ^^!

Answer 1

Использование переменных с описательным именем более читабельно, чем длинные и сложные строки. В вашем случае это будет лучше:

var customPath = $el.data('root-path') + type + '/something/' + slug;
var result = content['aPossibleValue'] || customPath;

Answer 2

Если вы хотите уменьшить длину линии, можно использовать назначение деструктурирования для объекта content, чтобы сначала получить связанные свойства.На втором шаге вы можете использовать литералы шаблона , чтобы сгенерировать значение default, назначенное для результата в случае, если aPossibleValue приводит к значению falsy.Примерно так:

let {aPossibleValue, type, slug} = content;
var result = aPossibleValue || $el.data('root-path') + `${type}/something/${slug}`;

Но вы должны заметить, что это ES6 функции, не поддерживаемые в некоторых браузерах и / или версиях.Поэтому всегда проверяйте раздел совместимости браузера.В случае, если вы не можете получить доступ к этой роскоши, я пойду с чем-то вроде этого:

let val = content.aPossibleValue, type = content.type, slug = content.slug;
var result = val | $el.data('root-path') + type + '/something/' + slug;