如何在JavaScript中进行字符串插值？

Posted 2023-01-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在JavaScript中进行字符串插值？相关的知识，希望对你有一定的参考价值。

考虑此代码：

var age = 3;

console.log("I'm " + age + " years old!");

除了字符串串联以外，还有其他方法可以将变量的值插入字符串吗？

答案

自ES6起，您可以使用template literals：

const age = 3
console.log(`I'm $age years old!`)

另一答案

如果要在console.log输出中进行插值，则只是

console.log("Eruption 1: %s", eruption1);
                         ^^

在这里，%s是所谓的“格式说明符”。 console.log内置有这种插值支持。

另一答案

这是一种解决方案，要求您向对象提供值。如果不提供对象作为参数，则默认使用全局变量。但是最好还是坚持使用参数，这样会更清洁。

String.prototype.interpolate = function(props) 
    return this.replace(/\(\w+)\/g, function(match, expr) 
        return (props || window)[expr];
    );
;

// Test:

// Using the parameter (advised approach)
document.getElementById("resultA").innerText = "Eruption 1: eruption1".interpolate( eruption1: 112 );

// Using the global scope
var eruption2 = 116;
document.getElementById("resultB").innerText = "Eruption 2: eruption2".interpolate();

<div id="resultA"></div><div id="resultB"></div>

另一答案

扩展Greg Kindel's第二个答案，您可以编写一个函数来消除一些样板：

var fmt = 
    join: function() 
        return Array.prototype.slice.call(arguments).join(' ');
    ,
    log: function() 
        console.log(this.join(...arguments));

用法：

var age = 7;
var years = 5;
var sentence = fmt.join('I am now', age, 'years old!');
fmt.log('In', years, 'years I will be', age + years, 'years old!');

另一答案

我可以举一个例子给你看：

function fullName(first, last) 
  let fullName = first + " " + last;
  return fullName;


function fullNameStringInterpolation(first, last) 
  let fullName = `$first $last`;
  return fullName;


console.log('Old School: ' + fullName('Carlos', 'Gutierrez'));

console.log('New School: ' + fullNameStringInterpolation('Carlos', 'Gutierrez'));

另一答案

自ES6开始，如果您想在对象键中进行字符串插值，则执行以下操作将得到SyntaxError: expected property name, got '$'：

let age = 3
let obj =  `$age`: 3

您应该改为执行以下操作：

let obj =  [`$age`]: 3

另一答案

在较旧的浏览器中使用模板语法失败，如果要创建供公众使用的html，则很重要。使用串联是一个繁琐且难以阅读的过程，特别是如果您有很多或很长的表达式，或者您必须使用括号来处理数字和字符串项的混合（两者都使用+运算符）时。

php使用非常紧凑的表示法扩展了包含变量甚至某些表达式的带引号的字符串：$a="the color is $color";

在javascript中，可以使用可变数量的参数编写一个有效的函数来支持此功能：var a=S('the color is ',color);。尽管在此示例中没有比串联的优势，但是当表达式变长时，此语法可能会更清晰。或者，也可以像JavaScript一样，使用JavaScript函数使用美元符号来表示表达式的开始。

另一方面，编写有效的解决方法功能来为较旧的浏览器提供类似模板的字符串扩展并不难。可能已经有人做过。

最后，我认为sprintf（如C，C ++和PHP）可以用JavaScript编写，尽管它的效率要比其他解决方案低。

另一答案

为@Chris Nielsen的帖子的ES6版本替换更多。

String.prototype.supplant = function (o) 
  return this.replace(/\$([^\$]*)/g,
    (a, b) => 
      var r = o[b];
      return typeof r === 'string' || typeof r === 'number' ? r : a;
    
  );
;

string = "How now $color cow? $greeting, $greeting, moo says the $color cow.";

string.supplant(color: "brown", greeting: "moo");
=> "How now brown cow? moo, moo, moo says the brown cow."

另一答案

自定义灵活插值：

var sourceElm = document.querySelector('input')

// interpolation callback
const onInterpolate = s => `<mark>$s</mark>`

// listen to "input" event
sourceElm.addEventListener('input', parseInput) 

// parse on window load
parseInput() 

// input element parser
function parseInput()
  var html = interpolate(sourceElm.value, undefined, onInterpolate)
  sourceElm.nextElementSibling.innerHTML = html;


// the actual interpolation 
function interpolate(str, interpolator = ["", ""], cb)
  // split by "start" pattern
  return str.split(interpolator[0]).map((s1, i) => 
    // first item can be safely ignored
	  if( i == 0 ) return s1;
    // for each splited part, split again by "end" pattern 
    const s2 = s1.split(interpolator[1]);

    // is there's no "closing" match to this part, rebuild it
    if( s1 == s2[0]) return interpolator[0] + s2[0]
    // if this split's result as multiple items' array, it means the first item is between the patterns
    if( s2.length > 1 )
        s2[0] = s2[0] 
          ? cb(s2[0]) // replace the array item with whatever
          : interpolator.join('') // nothing was between the interpolation pattern
    

    return s2.join('') // merge splited array (part2)
  ).join('') // merge everything

input 
  padding:5px; 
  width: 100%; 
  box-sizing: border-box;
  margin-bottom: 20px;


*
  font: 14px Arial;
  padding:5px;

<input value="Everything between  is processed" />
<div></div>

另一答案

tl; dr

使用ECMAScript 2015的模板字符串文字，如果适用。

说明

根据ECMAScript 5规范，没有直接方法可以执行，但是ECMAScript 6具有template strings，在起草规范时也称为quasi-literals。像这样使用它们：

> var n = 42;
undefined
> `foo$nbar`
'foo42bar'

您可以在中使用任何有效的JavaScript表达式。例如：

> `foo$name: 'Google'.namebar`
'fooGooglebar'
> `foo$1 + 3bar`
'foo4bar'

另一个重要的事情是，您不必再担心多行字符串。您可以简单地将它们写为

> `foo
...     bar`
'foo\n    bar'

注意：我使用io.js v2.4.0评估了上面显示的所有模板字符串。您也可以使用最新的Chrome浏览器来测试上面显示的示例。

注意： ES6规范为now finalized，但尚未由所有主流浏览器实现。根据Mozilla Developer Network pages，将从以下版本开始实现基本支持：Firefox 34，Chrome 41，Internet Explorer12。如果您是Opera，Safari或Internet Explorer用户，现在对此感到好奇，在所有人都获得支持之前，可以使用this test bed进行游戏。