템플릿 엔진 손으로 쓰기

1613 단어

자체 구현 stringFormat 함수


stringFormat 함수의 사용 예: var eleDiv = stringFormat(' {1} ', 'ele', ' div'); 위의 코드를 실행하면 eleDiv는
div
즉, stringFormat를 통해 문자열을 포맷하여 출력할 수 있다.
스스로 실현된 사고방식
  • 은 이 함수에 몇 개의 매개 변수가 있는지 예측할 수 없기 때문에 최소한 한 개(처리해야 할 문자열)는 함수 내에서arguments를 통해 변수
  • 을 획득해야 한다.
  • 의 첫 번째 매개 변수string에는 "{0}、{1}..."이라는 유형의 문자가 포함되어 있는데 각각 " 0 、 1 ..."을 사용할 것이다. 따라서 함수에서 우리는 {}문자를 가져와 교체해야 하기 때문에 정규 표현식과 그 리플렉스 방법, 그리고 정규 그룹
  • 을 사용해야 한다.
    코드는 다음과 같습니다.
    function stringFormat(string) {
      var data = [].slice.call(arguments, 1);
      var regex = /{(\d+)}/g;
      string = string.replace(regex, function(){
        //         arguments     ,      
        // console.log(arguments)
        var index = arguments[1]; // arguments[1]            
        return data[index];
      });
      return string;
    }
    stringFormat('hi, {0}, {1}', 1,2,3,4,5,6)
    

    템플릿 엔진 제1판 자체 구현


    변수 사용
    var Temperate = function (string, data){
      var regex = //g;
      var match ;
      while(match = regex.exec(string)) {
        string = string.replace(match[0], data[match[1]]);
      }
      return string;
    }
    var data = {
      word: "hahaha",
      woooorld: '1234'
    };
    
    var str = Temperate('hello  hhah ', data)
    console.log(str);
    

    , —— 20 Javascript !

    좋은 웹페이지 즐겨찾기