자리 표시자와 대체 개체를 사용하여 자바스크립트 문자열을 포맷하시겠습니까?
는 와 있습니다.My Name is %NAME% and my age is %AGE%.
%XXX%자리 표시자입니다.우리는 어떤 대상으로부터 가치를 대체할 필요가 있습니다.
:{"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"}
객체를 파싱하고 문자열을 해당 값으로 교체해야 합니다.최종 출력은 다음과 같습니다.
제 이름은 마이크이고 나이는 26살입니다.
전체 작업은 순수 자바스크립트나 jquery를 사용해야 합니다.
원래 질문의 요구 사항은 임의의 대체 키의 런타임 처리인 것처럼 보이기 때문에 문자열 보간의 이점을 얻을 수 없음이 분명합니다.
그러나 문자열 보간만 수행해야 하는 경우 다음을 사용할 수 있습니다.
const str = `My name is ${replacements.name} and my age is ${replacements.age}.`
문자열의 구분을 지정하는 백틱은 필수 항목입니다.
을 위해 OP 의를 할 수 String.prototype.replace()대체품으로 사용할 수 있습니다.
다음 코드는 교체 없이 모든 매치를 처리하고 터치하지 않습니다(교체 값이 모든 문자열이 아닌 경우 아래 참조).
var replacements = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"},
str = 'My Name is %NAME% and my age is %AGE%.';
str = str.replace(/%\w+%/g, function(all) {
return replacements[all] || all;
});
대체 항목 중 일부가 문자열이 아닌 경우 개체에 먼저 존재하는지 확인합니다.된 형식이 다인할 수 있습니다.in이를 달성하기 위한 연산자.
)이에 (, )가null입 ,입Object.prototype.hasOwnProperty()당신이 된 서브스트링들 중 이름 즉 과 을 하지 않는 한.
않으면 대체 이 인 'hasOwnProperty'이 된 될 겁니다..
은 로, 라고 합니다.replacementsObject, 조금도 아닌Array.
ES6 템플릿 리터럴을 사용하는 것은 어떻습니까?
var a = "cat";
var b = "fat";
console.log(`my ${a} is ${b}`); //notice back-ticked string
현재 이 동작에 대한 기본 솔루션이 자바스크립트에 아직 없습니다.태그가 지정된 템플릿은 관련된 것이지만 해결하지는 않습니다.
여기 알렉스 솔루션의 리팩터와 교체할 대상이 있습니다.
이 솔루션은 템플릿 리터럴의 네이티브 자바스크립트 보간으로 화살표 함수와 자리 표시자에 대한 유사한 구문을 사용합니다 ({}%%). 또한 구분 기호를 포함할 필요가 없습니다(%대체품의 이름으로 말입니다.
두 가지 맛(업데이트와 함께 세 가지)이 있습니다. 설명적인 맛, 축소된 맛, 우아한 맛, 그룹별로 축소된 맛입니다.
설명적 솔루션:
const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';
const replacements = {
name: 'Mike',
age: '26',
};
const string = stringWithPlaceholders.replace(
/{\w+}/g,
placeholderWithDelimiters => {
const placeholderWithoutDelimiters = placeholderWithDelimiters.substring(
1,
placeholderWithDelimiters.length - 1,
);
const stringReplacement = replacements[placeholderWithoutDelimiters] || placeholderWithDelimiters;
return stringReplacement;
},
);
console.log(string);감소된 솔루션:
const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';
const replacements = {
name: 'Mike',
age: '26',
};
const string = stringWithPlaceholders.replace(/{\w+}/g, placeholder =>
replacements[placeholder.substring(1, placeholder.length - 1)] || placeholder
);
console.log(string);업데이트 2020-12-10
@Kade가 주석에 제시한 그룹별 우아한 축소 솔루션:
const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';
const replacements = {
name: 'Mike',
age: '26',
};
const string = stringWithPlaceholders.replace(
/{(\w+)}/g,
(placeholderWithDelimiters, placeholderWithoutDelimiters) =>
replacements[placeholderWithoutDelimiters] || placeholderWithDelimiters
);
console.log(string);업데이트 2021-01-21
@Jesper가 주석에 제시한 대로 빈 문자열을 대체할 수 있도록 지원합니다.
const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';
const replacements = {
name: 'Mike',
age: '',
};
const string = stringWithPlaceholders.replace(
/{(\w+)}/g,
(placeholderWithDelimiters, placeholderWithoutDelimiters) =>
replacements.hasOwnProperty(placeholderWithoutDelimiters) ?
replacements[placeholderWithoutDelimiters] : placeholderWithDelimiters
);
console.log(string);JQuery(jquery.validate.js)를 사용하면 쉽게 작동할 수 있습니다.
$.validator.format("My name is {0}, I'm {1} years old",["Bob","23"]);
또는 해당 기능을 사용하려면 해당 기능을 정의하고 다음과 같이 사용할 수 있습니다.
function format(source, params) {
$.each(params,function (i, n) {
source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
})
return source;
}
alert(format("{0} is a {1}", ["Michael", "Guy"]));
크레딧은 jquery. validate.js 팀
현대 브라우저와 마찬가지로 자리 표시자는 C 스타일 기능과 유사한 새로운 버전의 Chrome/Firefox에서 지원됩니다.printf().
자리 표시자:
%s끈.%d,%i정수.%f부동 소수점 번호.%o개체 하이퍼링크.
예.
console.log("generation 0:\t%f, %f, %f", a1a1, a1a2, a2a2);
BTW, 출력을 보려면:
- Chrome에서 바로가기를 사용합니다.
Ctrl + Shift + J아니면F12개발자 도구를 엽니다. - Firefox에서는 바로 가기를 사용합니다.
Ctrl + Shift + K아니면F12개발자 도구를 엽니다.
@Update - nodejs 지원
nodejs가 지원하지 않는 것 같습니다.%f, 대신에, 사용할 수 있습니다.%dnodejs에서와 함께%d숫자는 정수가 아닌 부동 숫자로 인쇄됩니다.
그냥 사용.
var values = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"};
var substitutedString = "My Name is %NAME% and my age is %AGE%.".replace("%NAME%", $values["%NAME%"]).replace("%AGE%", $values["%AGE%"]);
다음과 같은 사용자 지정 바꾸기 기능을 사용할 수 있습니다.
var str = "My Name is %NAME% and my age is %AGE%.";
var replaceData = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"};
function substitute(str, data) {
var output = str.replace(/%[^%]+%/g, function(match) {
if (match in data) {
return(data[match]);
} else {
return("");
}
});
return(output);
}
var output = substitute(str, replaceData);
여기 http://jsfiddle.net/jfriend00/DyCwk/ 에서 확인하실 수 있습니다.
console.log에 가까운 작업을 하려면 에 있는 것처럼 %s 자리 표시자 교체와 같은 작업을(를)
>console.log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright")
>Hello Loreto how are you today is everything allright?
제가 썼어요.
function log() {
var args = Array.prototype.slice.call(arguments);
var rep= args.slice(1, args.length);
var i=0;
var output = args[0].replace(/%s/g, function(match,idx) {
var subst=rep.slice(i, ++i);
return( subst );
});
return(output);
}
res=log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright");
document.getElementById("console").innerHTML=res;<span id="console"/>당신은 얻을 것입니다.
>log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright")
>"Hello Loreto how are you today is everything allright?"
갱신하다
다음과 같은 간단한 변형을 추가했습니다.String.prototype문자열 변환을 처리할 때 유용합니다. 여기 있습니다.
String.prototype.log = function() {
var args = Array.prototype.slice.call(arguments);
var rep= args.slice(0, args.length);
var i=0;
var output = this.replace(/%s|%d|%f|%@/g, function(match,idx) {
var subst=rep.slice(i, ++i);
return( subst );
});
return output;
}
그러면 당신은 할 것입니다.
"Hello %s how are you %s is everything %s?".log("Loreto", "today", "allright")
"Hello Loreto how are you today is everything allright?"
여기서 이 버전을 사용해 보십시오.
이것은 당신이 바로 그것을 할 수 있게 해줍니다.
NPM: https://www.npmjs.com/package/stringinject
GitHub: https://github.com/tjcafferkey/stringinject
다음을 수행합니다.
var str = stringInject("My username is {username} on {platform}", { username: "tjcafferkey", platform: "GitHub" });
// My username is tjcafferkey on Git
문자열을 쉽게 포맷할 수 있는 코드를 작성했습니다.
이 기능을 사용합니다.
function format() {
if (arguments.length === 0) {
throw "No arguments";
}
const string = arguments[0];
const lst = string.split("{}");
if (lst.length !== arguments.length) {
throw "Placeholder format mismatched";
}
let string2 = "";
let off = 1;
for (let i = 0; i < lst.length; i++) {
if (off < arguments.length) {
string2 += lst[i] + arguments[off++]
} else {
string2 += lst[i]
}
}
return string2;
}
예
format('My Name is {} and my age is {}', 'Mike', 26);
산출량
제 이름은 마이크이고 나이는 26살입니다.
node.js를 사용하는 경우 StackExchange 자체 솔루션을 사용할 수 있습니다.formatUnicorn유틸리티 기능(https://www.npmjs.com/package/format-unicorn) :
let x = {name:'jason', food:'pine cones'};
let s = '{name} enjoys a delicious bowl of {food}';
let formatted = x.formatUnicorn(s);
또한 약간 엣지있는 케이스이지만 노드를 사용하는 것이 아니라 SE 사이트에 대한 사용자 스크립트를 작성하는 중이라면,formatUnicornString prototype에 이미 나와 있을 것입니다.
간단한 예로 다음을 들 수 있습니다.
var name = 'jack';
var age = 40;
console.log('%s is %d yrs old',name,age);
출력은 다음과 같습니다.
잭은 40살입니다.
여기에는 런타임 시 es6 템플릿 리터럴을 동적으로 사용하여 이를 수행하는 또 다른 방법이 있습니다.
const str = 'My name is ${name} and my age is ${age}.'
const obj = {name:'Simon', age:'33'}
const result = new Function('const {' + Object.keys(obj).join(',') + '} = this.obj;return `' + str + '`').call({obj})
document.body.innerHTML = resultconst stringInject = (str = '', obj = {}) => {
let newStr = str;
Object.keys(obj).forEach((key) => {
let placeHolder = `#${key}#`;
if(newStr.includes(placeHolder)) {
newStr = newStr.replace(placeHolder, obj[key] || " ");
}
});
return newStr;
}
Input: stringInject("Hi #name#, How are you?", {name: "Ram"});
Output: "Hi Ram, How are you?"
ES6:
const strFormat = (str, ...args) => args.reduce((s, v) => s.replace('%s', v), str);
// Use it like:
const result = strFormat('%s is %s yrs old', 'name', 23);
여기에 좋은/비슷한 답변이 많이 있습니다.대체를 위해 객체(또는 일부 JSON 데이터 구조)에 내포된 키를 쉽게 얻을 수 있는 기능을 원했기 때문에 다음과 같은 간단한 접근 방식을 취했습니다.
const getKey = (d, path) => {
// path can be a string like 'key1.key2' or an iterable of keys
if (typeof(path) === 'string') {
path = path.split('.')
}
return path.reduce((x, y) => x[y], d)
}
const inject = (str, obj) => str.replace(/\${(.*?)}/g, (x,g)=> getKey(obj, g));
// Example
> const str = 'there are ${a} ways to ${b.c}'
undefined
> inject(str, {'a':'many', 'b': {'c': 'skin a cat'}})
'there are many ways to skin a cat'
이것저것 영감을 주는 거죠
이것은 Gerson Diniz와 Shubham Vyas의 병합 솔루션입니다.
인수 또는 개체의 집합을 전달할 수 있습니다.
function strSwap(str) {
if (!str) return null;
let args = [];
for (let a of arguments)
args.push(a);
args.shift();
if (!args.length) return null;
// replacement by object - {{prop}}
if (!!(args[0].constructor && args[0].constructor.name.toLowerCase() === 'object')) {
for (let i in args[0]) {
let n = `{{${i}}}`;
str = str.includes(n) ? str.replaceAll(n, args[0][i] + '') : str;
}
}
// replacement by placeholders - %s
else {
str = args.reduce((s, v) => s.replace('%s', v), str);
}
return str;
}
// ---------------------
console.log(strSwap('Hello %s, my name is %s.', 'alice', 'bob'));
console.log(strSwap('Hello {{a}}, my name is {{b}}. Hello {{b}}.', {
a: 'alice',
b: 'bob'
}));알렉스의 코드록!감사합니다!
교체 기능을 약간 수정하여 이름으로 교체 변수를 직접 사용할 수 있습니다.
var replacements = {
"NAME": "Mike",
"AGE": "26",
"EVENT": "20"
},
str = 'My Name is ${NAME} and my age is ${AGE}, the following ${placeholder} is missing.';
str = str.replace(/\$\{(.*?)\}/g, function(placeholder, name) {
return replacements[name] || placeholder;
});
언급URL : https://stackoverflow.com/questions/7975005/format-a-javascript-string-using-placeholders-and-an-object-of-substitutions
'programing' 카테고리의 다른 글
| 인쇄방법인쇄방법XDocument 사용XDocument 사용 (0) | 2023.09.20 |
|---|---|
| Oracle: 올바른 월이 아님 (0) | 2023.09.20 |
| K&R C 2장의 getbits() 방법 이해에 도움이 필요합니다. (0) | 2023.09.20 |
| HTML IMG 태그를 이용한 종횡비 유지 방법 (0) | 2023.09.20 |
| 버퍼를 구조물로 해석하는 정확하고 휴대하기 쉬운 방법 (0) | 2023.09.15 |