Hay muchas opciones. Cual escoger depende de muchas cosas, como el tamaño de tu proyecto, el manejo de CSS del proyecto, y claro tu preferencia personal.
Usando solo la información que haz dado arriba es difícil dar una respuesta completa. Podrías agregar: contexto del projecto, estas usando algun framwork (react, angular), las líneas de codigo que haz mostrado están en un script, o son parte de algun componente de algun framework? etc etc.
Suena a que talves confundes el uso de typescript como lenguaje/herramienta y su relación con "páginas web". Por ejemplo, asumo que ese element.texto
en realidad es una frase que será vista en la web, y como tal, está en alguna ubicación de tu HTML. Más específicamente, dentro de algun <div>
o similar. Entonces para darle formato simplemente asignas la clase correspondiente a este, por ejemplo:
<div class=name>Hola mundo.</div>
y listo.
También recomendaría organizar mejor ese string tan largo. Esto depende si estás dentro de un TSX o estás escribiendo algún código general en typescript (no especificaste). Pero en general parece que intentas hacer una mezcla de "string interpolation" y TSX. Quieres sustituir variables y ejecutar lógica en una sola línea muy larga, esto no es posible. Debes separar la lógica element.status === 5 ? 'de': 'a'
y las sustituciones ${element.nombre_completo}
y despues combinarlas. Por ejemplo:
let gramatica = element.status === 5 ? 'de': 'a';
let hora = moment(element.hora, 'HH:mm:ss').format(this.auth.formatohorario);
let fecha = moment(element.fecha).format('LL');
let frase = `${element.nombre_completo} ha ${txt} una cita ${gramatica} las ${hora} el día ${fecha}`
element.texto = frase
En este ejemplo hora
y fecha
sí podrían estar dentro de "frase" directamente, pero pienso esto es más legible. Lo que importa es que al final tienes un solo string "frase" que puedes usar con confianza.
Como último punto, como mencioné el estilo de código inicial sugiere que intentabas usar JSX dentro de algún component de react por ejemplo. Si eso fuera el caso podrías en teoría meter todo junto de la siguiente manera:
const miElemento = <div className='name'>
{element.nombre_completo} ha ${txt} una cita
{element.status === 5 ? 'de': 'a'} las
{moment(element.hora, 'HH:mm:ss').format(this.auth.formatohorario)} el día
{moment(element.fecha).format('LL')}
</div>;
Esto funciona, pero opino que la opción anterior es más fácil de leer.
Si das más datos con gusto actualizo las opciones.