¿Equivalente de JavaScript de la función format() de Python?

5 minutos de lectura

Python tiene esta hermosa función para convertir esto:

bar1 = 'foobar'
bar2 = 'jumped'
bar3 = 'dog'

foo = 'The lazy ' + bar3 + ' ' + bar2 ' over the ' + bar1
# The lazy dog jumped over the foobar

Dentro de esto:

bar1 = 'foobar'
bar2 = 'jumped'
bar3 = 'dog'

foo = 'The lazy {} {} over the {}'.format(bar3, bar2, bar1)
# The lazy dog jumped over the foobar

¿JavaScript tiene tal función? Si no, ¿cómo crearía uno que siga la misma sintaxis que la implementación de Python?

  • Mire este hilo para encontrar una solución: stackoverflow.com/questions/610406/…

    – Daniel Doezema

    11 de febrero de 2011 a las 21:28


  • Siempre uso jQuery en muchos de mis sitios, por lo que no estaría de más. ¿JS le permite subclasificar o agregar funciones a objetos de cadena?

    – Licuadora

    11 de febrero de 2011 a las 21:29

  • JavaScript es un lenguaje basado en prototipos. Puede ampliar todos los objetos de un tipo mejorando su prototipo común.

    – zzzzBov

    11 de febrero de 2011 a las 21:32

  • prototype es una característica del lenguaje. La biblioteca de prototipos está completamente separada.

    – usuario113716

    11 de febrero de 2011 a las 21:42


  • posible duplicado de Javascript equivalente a .format() de python

    – Stefano

    8 de enero de 2015 a las 11:11

Otro enfoque, usando el String.prototype.replace método, con una función de “reemplazo” como segundo argumento:

String.prototype.format = function () {
  var i = 0, args = arguments;
  return this.replace(/{}/g, function () {
    return typeof args[i] != 'undefined' ? args[i++] : '';
  });
};

var bar1 = 'foobar',
    bar2 = 'jumped',
    bar3 = 'dog';

'The lazy {} {} over the {}'.format(bar3, bar2, bar1);
// "The lazy dog jumped over the foobar"

  • Sí, tiene sentido. jsfiddle.net/wFb2p/6 No había captado previamente el hecho de que la función se ejecuta una vez para cada partido. +1

    – usuario113716

    11 de febrero de 2011 a las 22:59


  • El uso de una función para el reemplazo también significa que puede extender esto fácilmente para admitir marcadores de posición no vacíos como {1}.

    – Duncan

    12 de febrero de 2011 a las 15:47

  • Se desaconseja ampliar las clases nativas. Debería usar una función o definir su propia clase/subclase. Esto ayuda a otros programadores a distinguir características nativas y no nativas. También evita el riesgo de interferencia de código: alguien más define podría definir String.Prototype.format también.

    – loxaxs

    2 de septiembre de 2018 a las 11:07

  • ¿Por qué no es una parte estándar de JavaScript?

    – predeterminado123

    15 oct 2020 a las 22:30

  • Uso esta función en cada proyecto JS, ¡gracias!

    – Pedro Lobito

    25 de marzo de 2021 a las 1:58

avatar de usuario
Yash Mehrotra

Hay una manera, pero no exactamente usando format.

var name = "John";
var age = 19;
var message = `My name is ${name} and I am ${age} years old`;
console.log(message);

jsfiddle- Enlace

  • ¿Como funciona esto? no estoy familiarizado con el ${...} en Javascript. ¡Aunque impresionante!

    – abatir

    06/04/2016 a las 22:32

  • Todo esto es bastante interesante, pero eso no resuelve el problema. El método de ES6 no tiene sentido en muchos casos si no podemos pasarlo a un contexto particular. Lo que escribiste es principalmente azúcar sintáctico para la concatenación de cadenas.

    – Loïc Faure-Lacroix

    6 de julio de 2016 a las 21:16

  • Esto resuelve el problema y, si no tiene contexto, puede hacer fácilmente cosas como var message = `My name is ${name || 'default'} and I am ${age || 'default'} years old`;

    – HussienK

    2 de febrero de 2017 a las 18:53


  • desarrollador.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

    – musaraña

    10 de abril de 2018 a las 15:08

  • @shrewmouse: O simplemente f'My name is {name} and I am {age}' en Pitón 3.6.

    – Licuadora

    10 de abril de 2018 a las 15:49

avatar de usuario
Cornflex

tl; dr

foo = (a, b, c) => `The lazy ${a} ${b} over the ${c}`

Por qué las cadenas de plantillas por sí solas no son suficientes

ES6 cadenas de plantillas proporcionar una característica bastante similar al formato de cadena de pitones. Sin embargo, debe conocer las variables antes de construir la cadena:

var templateString = `The lazy ${bar3} ${bar2} over the ${bar1}`;

¿Por qué formatear?

de pitón str.format le permite especificar la cadena antes de incluso sabe qué valores desea conectar, como:

foo = 'The lazy {} {} over the {}'

bar1 = 'foobar'
bar2 = 'jumped'
bar3 = 'dog'

foo.format(bar3, bar2, bar1)

Solución

Con un función de flechapodemos envolver elegantemente la cadena de plantilla para su uso posterior:

foo = (a, b, c) => `The lazy ${a} ${b} over the ${c}`

bar1 = 'foobar';
bar2 = 'jumped';
bar3 = 'dog';

foo(bar3, bar2, bar1)

Por supuesto, esto también funciona con una función regular, pero la función de flecha nos permite hacer de esto una sola línea. Ambas características están disponibles en la mayoría de los navegadores y tiempos de ejecución:

  • Esto pasa por alto una razón importante para usar xx.format(), con los mismos inconvenientes que la respuesta de @Yash Mehrotra, que es que la cadena a formatear podría necesitar ser dinámica en lugar de codificada.

    – mwag

    25 de marzo de 2020 a las 16:53

  • Esta debería ser la mejor respuesta. ¡Gracias!

    – Peijun Zhu

    15 de noviembre de 2020 a las 6:35

Buscando una respuesta para la misma pregunta, acabo de encontrar esto: https://github.com/davidchambers/string-formatque es “formato de cadena de JavaScript inspirado en Python’s str.format()“. Parece que es más o menos lo mismo que python format() función.

Tomado de la biblioteca de YAHOO:

YAHOO.Tools.printf = function() { 
  var num = arguments.length; 
  var oStr = arguments[0];   
  for (var i = 1; i < num; i++) { 
    var pattern = "\\{" + (i-1) + "\\}"; 
    var re = new RegExp(pattern, "g"); 
    oStr = oStr.replace(re, arguments[i]); 
  } 
  return oStr; 
} 

Llámalo como:

bar1 = 'foobar'
bar2 = 'jumped'
bar3 = 'dog'

foo = YAHOO.Tools.printf('The lazy {0} {1} over the {2}', bar3, bar2, bar1); 

Aquí está mi primer intento. Siéntase libre de señalar los defectos.

Ejemplo: http://jsfiddle.net/wFb2p/5/

String.prototype.format = function() {
    var str = this;
    var i = 0;
    var len = arguments.length;
    var matches = str.match(/{}/g);
    if( !matches || matches.length !== len ) {
        throw "wrong number of arguments";
    }
    while( i < len ) {
        str = str.replace(/{}/, arguments[i] );
        i++;
    }
    return str;
};

EDITAR: Lo hizo un poco más eficiente al eliminar el .match() llamar en el while declaración.

EDITAR: Lo cambió para que se arroje el mismo error si no pasa ningún argumento.

avatar de usuario
afrén thomas

Puede usar literales de plantilla en JS,

const bar1 = 'foobar'
const bar2 = 'jumped'
const bar3 = 'dog'
foo = `The lazy ${bar3} ${bar2} over the ${bar1}`

Creo que esto fue útil.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad