JavaScript에서 문자열 보간은 어떻게 하나요?

JavaScript에서 문자열 보간은 어떻게 하나요?

다음 코드를 고려하십시오.

var age = 3;

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

문자열 연결 외에 문자열에 변수 값을 삽입하는 다른 방법이 있습니까?

ES6 이후 템플릿리터럴을 사용할 수 있습니다.

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

추신: 백틱 사용에 유의하십시오.``.

dr;dr

해당하는 경우 ECMAScript 2015의 Template String Literals를 사용합니다.

설명.

ECMAScript 5 사양에 따라 직접 수행할 수 있는 방법은 없지만 ECMAScript 6에는 템플릿 문자열이 있으며, 이는 사양서 초안 작성 시 준 리터럴이라고도 합니다.다음과 같이 사용합니다.

> var n = 42;
undefined
> `foo${n}bar`
'foo42bar'

"JavaScript" 내에서 한 JavaScript 할 수 .{} §:

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

또 다른 중요한 것은, 더 이상 여러 줄의 줄에 대해 걱정할 필요가 없다는 것입니다.라고 간단하게 쓸 수 있습니다.

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

주의: io.js v2.4.0을 사용하여 위의 모든 템플릿 문자열을 평가했습니다.최신 Chrome을 사용하여 위의 예제를 테스트할 수도 있습니다.

주의: ES6 사양은 현재 확정되었지만 모든 주요 브라우저에서 아직 구현되지 않았습니다.
Mozilla Developer Network 페이지에 따르면 이 기능은 다음 버전부터 기본 지원을 위해 구현됩니다.Firefox 34, Chrome 41, Internet Explorer 12.Opera, Safari 또는 Internet Explorer 사용자라면 이 테스트베드를 사용하여 모든 사용자가 이 테스트베드를 사용할 수 있습니다.

Douglas Crockford의 수정 JavaScript에는String.prototype.supplant★★. 하기 쉽다짧고 친숙하며 사용하기 쉽습니다.

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

// Usage:
alert("I'm {age} years old!".supplant({ age: 29 }));
alert("The {a} says {n}, {n}, {n}!".supplant({ a: 'cow', n: 'moo' }));

String의 프로토타입을 변경하지 않으려면 항상 독립형으로 조정하거나 다른 네임스페이스에 배치할 수 있습니다.

주의: 자체 구분 기호를 이스케이프할 수 없는 템플릿 시스템은 사용하지 마십시오.를 들어, 이렇게 하다, 하다, 하다, 하다를 해서 다음 할 수 이 없습니다.supplant()방법은 여기에 기재되어 있습니다.

"저는 {나이} 변수 덕분에 3살이 되었습니다."

간단한 보간은 소규모 자체 포함 스크립트에 사용할 수 있지만 심각한 사용을 제한하는 설계 결함을 수반하는 경우가 많습니다.저는 솔직히 다음과 같은 DOM 템플릿을 선호합니다.

<div> I am <span id="age"></span> years old!</div>

jQuery를 사용합니다.$('#age').text(3)

또는 단순히 문자열 연결에 싫증이 난 경우 항상 대체 구문이 있습니다.

var age = 3;
var str = ["I'm only", age, "years old"].join(" ");

이 패턴은 많은 언어에서 사용하는데, 아직 제대로 할 수 있는 방법을 모르기 때문에 아이디어를 빨리 얻고 싶을 때 사용합니다.

// JavaScript
let stringValue = 'Hello, my name is {name}. You {action} my {relation}.'
    .replace(/{name}/g    ,'Inigo Montoya')
    .replace(/{action}/g  ,'killed')
    .replace(/{relation}/g,'father')
    ;

특별히 효율적인 것은 아니지만 읽을 수 있습니다.항상 작동하며 항상 사용할 수 있습니다.

' VBScript
dim template = "Hello, my name is {name}. You {action} my {relation}."
dim stringvalue = template
stringValue = replace(stringvalue, "{name}"    ,"Luke Skywalker")     
stringValue = replace(stringvalue, "{relation}","Father")     
stringValue = replace(stringvalue, "{action}"  ,"are")

항상

* COBOL
INSPECT stringvalue REPLACING FIRST '{name}'     BY 'Grendel Mother'
INSPECT stringvalue REPLACING FIRST '{relation}' BY 'Son shoulder'
INSPECT stringvalue REPLACING FIRST '{action}'   BY 'made a gaping mortal-making wound upon.'

시제품의 템플릿 시스템을 사용하여 너트를 깨려면 큰 망치를 사용할 수 있습니다.

var template = new Template("I'm #{age} years old!");
alert(template.evaluate({age: 21}));

sprintf 라이브러리(완전한 오픈소스 JavaScript sprintf 구현)를 사용해 보십시오.예를 들어 다음과 같습니다.

vsprintf('The first 4 letters of the english alphabet are: %s, %s, %s and %s', ['a', 'b', 'c', 'd']);

vsprintf는 인수 배열을 받아 포맷된 문자열을 반환합니다.

하고 console.log just, understanding

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

서서,,%s는, 「 지정자입니다. console.log이런 종류의 보간 지원 장치가 내장되어 있습니다

ES6를 할 수.template string바벨과 같은 사용 가능한 전치선을 사용하여 ES5로 변환합니다.

const age = 3;

console.log(`I'm ${age} years old!`);

http://www.es6fiddle.net/im3c3euc/

가장 간단한 것은

`my string ${VARIABLE}`

이를 달성하기 위한 덜 효율적인 방법은

function format(str, ...params) {
  for(const param of params)
    str = str.replace("%", param);
   return str;
}

와 함께 사용할 수 있습니다.

format("My % string", "interpolation")

문자열 보간용 경량 JavaScript 모듈인 kiwi를 사용해 보십시오.

할수있습니다

Kiwi.compose("I'm % years old!", [age]);

또는

Kiwi.compose("I'm %{age} years old!", {"age" : age});

다음은 개체에 값을 제공해야 하는 솔루션입니다.개체를 매개 변수로 지정하지 않으면 기본적으로 전역 변수를 사용합니다.하지만 매개 변수를 사용하는 것이 좋습니다. 훨씬 깨끗합니다.

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>

let age = 3;

console.log(`I'm ${age} years old!`);

backticks " 및 ES6 템플릿 문자열을 사용할 수 있습니다.

Greg Kindel의 두 번째 답변을 확장하면 보일러 플레이트의 일부를 제거하는 함수를 작성할 수 있습니다.

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'));

내가 찾던 걸 못 찾다가 찾았어

를 있는 .js 가 내장되어 .util다음과 같이 합니다.

util.format("Hello my name is %s", "Brent");
> Hello my name is Brent

교롭도, 은은, coinc에 포함되어 .console.log -Node.js의 됩니다.

console.log("This really bad error happened: %s", "ReferenceError");
> This really bad error happened: ReferenceError

ES6가 됩니다.SyntaxError: expected property name, got '${'다음과 같이 합니다.

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

대신 다음 작업을 수행해야 합니다.

let obj = { [`${age}`]: 3 }

ES6 버전의 @Chris Nielsen 게시물에 대한 추가 정보.

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."

오래된 브라우저에서는 템플릿 구문을 사용할 수 없습니다.공용 HTML을 작성하는 경우 중요합니다.특히 표현식이 많거나 긴 경우 또는 숫자 항목과 문자열 항목의 혼합을 처리하기 위해 괄호를 사용해야 하는 경우(둘 다 + 연산자를 사용함) 연결 사용은 지루하고 읽기 어렵습니다.

PHP는 변수를 포함하는 따옴표로 묶인 문자열과 매우 작은 표기법을 사용하여 일부 식을 확장합니다.$a="the color is $color";

JavaScript에서는 이를 지원하기 위해 효율적인 함수를 작성할 수 있습니다.var a=S('the color is ',color);변수 개수의 인수를 사용합니다.이 예에서는 연결보다 장점이 없지만 식이 길어질수록 이 구문이 명확해질 수 있습니다.또는 PHP에서처럼 자바스크립트 함수를 사용하여 식의 시작을 알리는 데 달러 기호를 사용할 수 있습니다.

한편, 오래된 브라우저에 대해 템플릿과 같은 문자열 확장을 제공하는 효율적인 회피책을 작성하는 것은 어렵지 않습니다.누군가는 이미 했을 것이다.

마지막으로 sprintf(C, C++, PHP와 같이)는 자바스크립트로 기술할 수 있을 것으로 생각합니다만, 다른 솔루션보다 효율은 조금 떨어집니다.

커스텀 플렉시블 보간:

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>

템플릿은 아마도 설명하신 경우에 가장 적합할 것입니다만, 데이터나 인수가 반복 가능한/배열 형식으로 존재하거나 필요한 경우 를 사용할 수 있습니다.

String.raw({
  raw: ["I'm ", " years old!"]
}, 3);

데이터를 배열로 사용하면 다음과 같이 확산 연산자를 사용할 수 있습니다.

const args = [3, 'yesterday'];
String.raw({
  raw: ["I'm ", " years old as of ", ""]
}, ...args);

언급URL : https://stackoverflow.com/questions/1408289/how-can-i-do-string-interpolation-in-javascript