Какие есть способы сократить данную строку?

Question

[Кирилл]

if( target.className != 'search' && target.className != 'search_input' && target.className != 'cancel_btn') {
	cancelSearch();
}

Comments

[Kovalsky]

Если речь о том чтобы сделать generic проверку, то наверное как-то так:

var classes = [ 'search', 'search_input', 'cancel_btn' ];

if ( classes.some(class_name => target.classList.includes( class_name )) ) {
  cancelSearch();
}

Или в метод пихнуть:

HTMLElement.prototype.hasAnyOfClasses = function( classes ) {
	return classes.some(class_name => this.classList.includes( class_name ))
}

if ( target.hasAnyOfClasses([ 'search', 'search_input', 'cancel_btn' ]) ) {
  cancelSearch();
}

Answer 1

[0xD34F]

Сложить допустимые значения в массив, с помощью метода узнать, содержится ли в массиве проверяемое значение:

if (![ 'search', 'search_input', 'cancel_btn' ].includes(target.className)) {

Или, заменить длинное обращение к проверяемому значению коротким через создание дополнительной переменной:

const t = target.className;
if (t != 'search' && t != 'search_input' && t != 'cancel_btn') {

Answer 2

[Павел Корнилов]

if( !/search|search_input|cancel_btn/i.test(target.className) ) cancelSearch();

UPD:
OR

!/search|search_input|cancel_btn/i.test(target.className) && cancelSearch();

Answer 3

[Negwereth]

Если вот на 100% уверен, что className состоит из одного слова.

if(!['search', 'search_input', 'cancel_btn'].includes(target.className)) {
  cancelSearch();
}

UPD:
И bulletproof реализация если несколько классов на элементе

const allowedClasses = ['search', 'search_input', 'cancel_btn'];

if(![...target.classList].some(name => allowedClasses.includes(name))) {
  cancelSearch();
}