Định dạng chuỗi JavaScript bằng cách sử dụng trình giữ chỗ và đối tượng thay thế?

Question 1

Tôi có một chuỗi với nói: My Name is %NAME% and my age is %AGE%.

%XXX%là trình giữ chỗ. Chúng ta cần thay thế các giá trị ở đó từ một đối tượng.

Đối tượng trông giống như: {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"}

Tôi cần phân tích cú pháp đối tượng và thay thế chuỗi bằng các giá trị tương ứng. Vì vậy, đầu ra cuối cùng sẽ là:

Tên tôi là Mike và tôi 26 tuổi.

Toàn bộ điều phải được thực hiện bằng cách sử dụng javascript hoặc jquery thuần túy.

Question 2

Các yêu cầu của câu hỏi ban đầu rõ ràng không thể hưởng lợi từ nội suy chuỗi, vì có vẻ như đó là một quá trình xử lý thời gian chạy của các khóa thay thế tùy ý.

Tuy nhiên , nếu bạn chỉ phải thực hiện nội suy chuỗi, bạn có thể sử dụng:

const str = `My name is ${replacements.name} and my age is ${replacements.age}.`

Lưu ý rằng các dấu gạch ngược phân cách chuỗi, chúng là bắt buộc.

Để có câu trả lời phù hợp với yêu cầu của OP cụ thể, bạn có thể sử dụng String.prototype.replace()cho các thay thế.

Mã sau sẽ xử lý tất cả các kết quả phù hợp và không chạm vào các kết quả mà không cần thay thế (miễn là các giá trị thay thế của bạn là tất cả các chuỗi, nếu không, hãy xem bên dưới).

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

jsFiddle .

Nếu một số thay thế của bạn không phải là chuỗi, trước tiên hãy đảm bảo rằng chúng tồn tại trong đối tượng. Nếu bạn có một định dạng như ví dụ, tức là được bao bọc trong các dấu phần trăm, bạn có thể sử dụng intoán tử để đạt được điều này.

jsFiddle .

Tuy nhiên, nếu định dạng của bạn không có định dạng đặc biệt, tức là bất kỳ chuỗi nào và đối tượng thay thế của bạn không có nullnguyên mẫu, hãy sử dụng Object.prototype.hasOwnProperty(), trừ khi bạn có thể đảm bảo rằng không có chuỗi con nào được thay thế tiềm năng của bạn sẽ xung đột với tên thuộc tính trên nguyên mẫu.

jsFiddle .

Ngược lại, nếu chuỗi thay thế của bạn là 'hasOwnProperty', bạn sẽ nhận được một chuỗi bị lộn xộn.

jsFiddle .

Lưu ý thêm, bạn nên được gọi là replacementsan Object, không phải an Array.

Question 3

Làm thế nào về việc sử dụng các ký tự mẫu ES6?

var a = "cat";
var b = "fat";
console.log(`my ${a} is ${b}`); //notice back-ticked string

Thông tin thêm về các ký tự mẫu ...

Question 4

Bạn có thể sử dụng JQuery (jquery.validate.js) để làm cho nó hoạt động dễ dàng.

$.validator.format("My name is {0}, I'm {1} years old",["Bob","23"]);

Hoặc nếu bạn chỉ muốn sử dụng tính năng đó, bạn có thể xác định chức năng đó và chỉ cần sử dụng nó như

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"]));

tín dụng cho nhóm jquery.validate.js

Question 5

Như với trình duyệt hiện đại, giữ chỗ được hỗ trợ bởi phiên bản mới của Chrome / Firefox, tương tự như chức năng C phong cách printf().

Phần giữ chỗ:

%s Chuỗi.
%d, %iSố nguyên.
%f Số điểm nổi.
%o Đối tượng siêu liên kết.

ví dụ

console.log("generation 0:\t%f, %f, %f", a1a1, a1a2, a2a2);

BTW, để xem đầu ra:

Trong Chrome, sử dụng phím tắt Ctrl + Shift + Jhoặc F12để mở công cụ dành cho nhà phát triển.
Trong Firefox, sử dụng phím tắt Ctrl + Shift + Khoặc F12để mở công cụ dành cho nhà phát triển.

@Update - hỗ trợ nodejs

Có vẻ như nodejs không hỗ trợ %f, thay vào đó, có thể sử dụng %dtrong nodejs. Với %dnumber sẽ được in dưới dạng số thực, không chỉ là số nguyên.

Question 6

Chỉ dùng replace()

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%"]);

Question 7

Bạn có thể sử dụng một chức năng thay thế tùy chỉnh như sau:

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

Bạn có thể thấy nó hoạt động tại đây: http://jsfiddle.net/jfriend00/DyCwk/ .

Question 8

Nếu bạn muốn làm điều gì đó gần hơn với console.log như thay thế các trình giữ chỗ% s như trong

>console.log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright")
>Hello Loreto how are you today is everything allright?

Tôi đã viết cái này

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

Mở rộng đoạn mã

bạn sẽ nhận được

>log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright")
>"Hello Loreto how are you today is everything allright?"

CẬP NHẬT

Tôi đã thêm một biến thể đơn giản String.prototypehữu ích khi xử lý các phép biến đổi chuỗi, đây là nó:

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;
   }

Trong trường hợp đó bạn sẽ làm

"Hello %s how are you %s is everything %s?".log("Loreto", "today", "allright")
"Hello Loreto how are you today is everything allright?"

Hãy thử phiên bản này tại đây

Question 9

Hiện tại vẫn chưa có giải pháp gốc trong Javascript cho hành vi này. Các mẫu được gắn thẻ là một cái gì đó có liên quan, nhưng không giải quyết được nó.

Ở đây có một cơ cấu lại của giải pháp alex với một đối tượng để thay thế.

Giải pháp sử dụng các hàm mũi tên và cú pháp tương tự cho các trình giữ chỗ như nội suy Javascript gốc trong các ký tự mẫu ( {}thay vì %%). Ngoài ra, không cần bao gồm dấu phân cách ( %) trong tên của các thay thế.

Có hai vị: trạch tả và gia giảm.

Giải pháp mô tả:

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

Mở rộng đoạn mã

Giải pháp giảm:

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

Mở rộng đoạn mã

Question 10

Điều này cho phép bạn làm chính xác điều đó

NPM: https://www.npmjs.com/package/stringinject

GitHub: https://github.com/tjcafferkey/stringinject

Bằng cách làm như sau:

var str = stringInject("My username is {username} on {platform}", { username: "tjcafferkey", platform: "GitHub" });

// My username is tjcafferkey on Git

Question 11

Đây là một cách khác để thực hiện việc này bằng cách sử dụng các nghĩa đen của mẫu es6 động trong thời gian chạy.

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 = result

Mở rộng đoạn mã

Question 12

Ví dụ nhanh:

var name = 'jack';
var age = 40;
console.log('%s is %d yrs old',name,age);

Đầu ra là:

jack đã 40 tuổi

Question 13

const 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?"

Question 14

Tôi đã viết một đoạn mã cho phép bạn định dạng chuỗi dễ dàng.

Sử dụng chức năng này.

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;
}

Thí dụ

format('My Name is {} and my age is {}', 'Mike', 26);

Đầu ra

Tên tôi là Mike và tôi 26 tuổi