Ответить на этот вопрос, несколько затруднителен, поскольку по коду, предоставленному вами, трудно определить контекст использования. Потому рассмотрим несколько случаев:
сырой html
В случае, если это простая html-разметка без каких-либо дополнительных надмножеств, то в такой разметке атрибутам значение передается обычной строкой, которая не выполняет никакой код, независимо от используемого разделителя
Шаблонный литерал
Под шаблонным литералом в javascript подразумевают строки, которые начинаются и заканчиваются с символом `
. Они знаменательны тем, что внутри них можно делать вставки javascript кода:
var a = 5;
var b = `line ${a + 1}`;
console.log(b); // line 6
Таким образом ваш код внутри шаблонного литерала мог бы выглядеть так так
jsx разметка
JSX - Это расширение синтаксиса javascript, позволяющее писать (совмещать) html разметку внутри javascript-кода. Его не понимают браузеры, поэтому нужен транспилер. Этот формат стал очень популярным благодаря росту популярности react, и сегодня его взяли на вооружение и другие не столь популярные библиотеки и фреймворки. Ваш код на реакт мог бы выглядеть так:
function App(){
const [item, setItem] = React.useState({type: 'tel'});
return <div>
<button onClick={()=>setItem({type: (item.type == 'tel' ? 'checkbox' : "tel")})}>
Click!
</button>
<input type={item.type == "tel" &&
item.type !== "checkbox" &&
item.type !== "text" &&
item.type !== "radio"
? "tel"
: "checkbox"} />
<br/>
</div>;
}
Вот рабочий пример https://coding-style.ru/code_reviews/345/edit
Lit-html
Существует так же много других полезных инструментов, которые позволяют использовать подобный синтаксис. Например, ниже пример использования lit элемента (на тс):
import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';
@customElement('my-element')
export class MyElement extends LitElement {
@property()
item: {type: string} = {type: 'tel'};
changeType(){
this.item = {type: this.item.type == 'tel' ? 'checkbox': 'tel'};
}
render() {
return html`
<button @click=${this.changeType}>Flip a coin!</button>
<input type="${
this.item.type == "tel" &&
this.item.type !== "checkbox" &&
this.item.type !== "text" &&
this.item.type !== "radio"
? "tel"
: "checkbox"
}" />
${this.item.type}
`;
}
}
Кстати тот кусок, который вы привели, внутри тегового шаблона к функции render LitElement-а вполне корректно бы работал. Так что все зависит от того контекста, в котором вы используете данный кусок кода
item
. И мне кажется что вы используетеReact
хотя ничего об этом не сказано ни в тегах ни в самом вопросе