String format 확장 제거

hwe/ts/chiefCenter.ts

@@ -57,12 +57,12 @@ function genChiefTableObj(): TableObj {
     };
 
     for (const chiefIdx of range(5, 13)) {
-        const $plate = $('#chief_{0}'.format(chiefIdx));
+        const $plate = $(`#chief_${chiefIdx}`);
         const $officerLevelText = $plate.find('.chiefLevelText');
         const $name = $plate.find('.chiefName');
         const turn: TurnDOMObj[] = [];
         for (const turnIdx of range(maxChiefTurn)) {
-            const $turn = $plate.find('.turn{0}'.format(turnIdx));
+            const $turn = $plate.find(`.turn${turnIdx}`);
             const $turnTime = $turn.find('.chiefTurnTime');
             const $turnPad = $turn.find('.chiefTurnPad');
             const $turnText = $turn.find('.chiefTurnText');
@@ -81,7 +81,7 @@ function genChiefTableObj(): TableObj {
 
 
 function clearChief(chiefIdx: number): void {
-    const $plate = $('#chief_{0}'.format(chiefIdx));
+    const $plate = $(`#chief_${chiefIdx}`);
     $plate.find('.chiefLevelText').html('-');
     $plate.find('.chiefTurnTime, .chiefTurnText, .chiefName').html(' ');
 }
@@ -121,7 +121,7 @@ async function reloadTable() {
 
         const plateObj = chiefTableObj[chiefIdx];
         if (chiefInfo.name) {
-            const $name = $('<span>{0}</span>'.format(chiefInfo.name));
+            const $name = $(`<span>${chiefInfo.name}</span>`);
             const nameColor = getNpcColor(chiefInfo.npcType);
             if (nameColor) {
                 $name.css('color', nameColor);
@@ -154,7 +154,7 @@ async function reloadTable() {
             const iWidth = unwrap(turnList[turnIdx].turnText.outerWidth());
             if (iWidth > oWidth * 0.95) {
                 const newFontSize = 13 * oWidth / iWidth * 0.9;
-                turnList[turnIdx].turnText.css('font-size', '{0}px'.format(newFontSize));
+                turnList[turnIdx].turnText.css('font-size', `${newFontSize}px`);
             }
             if (turnTimeObj) {
                 turnTimeObj = addMinutes(turnTimeObj, turnTerm);

hwe/ts/common_deprecated.ts

@@ -48,6 +48,18 @@ declare global {
     }
 }
 
+
+/**
+ * {0}, {1}, {2}형태로 포맷해주는 함수
+ * NOTE: TypeScript declare 충돌로 인해 우회 정의
+ */
+ (String.prototype as unknown as {format:(...args:(string|number)[])=>string}).format = function(this:string, ...args){
+    return this.replace(/{(\d+)}/g, function (match, number) {
+        return (typeof args[number] != 'undefined') ? args[number].toString() : match;
+    });
+};
+
+
 window.escapeHtml = escapeHtml;
 window.mb_strwidth = mb_strwidth;
 window.isBrightColor = isBrightColor;

hwe/ts/common_legacy.ts

@@ -2,7 +2,7 @@ import { unwrap } from "./util/unwrap";
 
 import $ from "jquery";
 import Popper from 'popper.js';
-(window as unknown as {Popper:unknown}).Popper = Popper;//XXX: 왜 popper를 이렇게 불러야 하는가?
+(window as unknown as { Popper: unknown }).Popper = Popper;//XXX: 왜 popper를 이렇게 불러야 하는가?
 import 'bootstrap';
 
 import axios from "axios";
@@ -30,22 +30,11 @@ export function convertSet<K extends string | number>(arr: ArrayLike<K>): Record
     return result;
 }
 
-
+export function stringFormat(text: string, ...args: (string | number)[]): string {
-/**
+    return text.replace(/{(\d+)}/g, function (match, number) {
- * {0}, {1}, {2}형태로 포맷해주는 함수
- */
-
-declare global {
-    interface String {
-        format(...args: (string | number)[]): string;
-    }
-}
-String.prototype.format = function (...args: (string | number)[]) {
-    return this.replace(/{(\d+)}/g, function (match, number) {
         return (typeof args[number] != 'undefined') ? args[number].toString() : match;
     });
-};
+}
-
 
 export function hexToRgb(hex: string): { r: number, g: number, b: number } | null {
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@@ -239,8 +228,7 @@ export function initTooltip($obj?: JQuery<HTMLElement>): void {
             if (!tooltipClassText) {
                 tooltipClassText = '';
             }
-            const template = '<div class="tooltip {0}" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
+            const template = `<div class="tooltip ${tooltipClassText}" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>`;
-                .format(tooltipClassText);
 
             $objTooltip.tooltip({
                 title: function () {

hwe/ts/map.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import $ from 'jquery';
 import { extend, isNumber } from 'lodash';
-import { convColorValue, convertDictById, convertSet } from './common_legacy';
+import { convColorValue, convertDictById, convertSet, stringFormat } from './common_legacy';
 import { InvalidResponse } from './defs';
 import { unwrap } from "./util/unwrap";
 import { convertFormData } from './util/convertFormData';
@@ -245,19 +245,19 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
                 remainYear -= 1;
             }
             if (remainYear) {
-                startYearText.push('{0}년'.format(remainYear));
+                startYearText.push(`${remainYear}년`);
             }
             if (remainMonth) {
-                startYearText.push('{0}개월'.format(remainMonth));
+                startYearText.push(`${remainMonth}개월`);
             }
 
-            tooltipTexts.push('초반제한 기간 : {0} ({1}년)'.format(startYearText.join(' '), startYear + 3));
+            tooltipTexts.push(`초반제한 기간 : ${startYearText.join(' ')} (${startYear + 3}년)`);
         }
 
         const currentTechLimit = Math.floor(Math.max(0, year - startYear) / 5) + 1;
         const nextTechLimitYear = currentTechLimit * 5 + startYear;
 
-        tooltipTexts.push('기술등급 제한 : {0}등급 ({1}년 해제)'.format(currentTechLimit, nextTechLimitYear, currentTechLimit + 1));
+        tooltipTexts.push(`기술등급 제한 : ${currentTechLimit}등급 (${nextTechLimitYear}년 해제)`);
         $map_title_tooltip.html(tooltipTexts.join('<br>'));
 
         $world_map.removeClass('map_string map_summer map_fall map_winter');
@@ -271,7 +271,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
             $world_map.addClass('map_winter');
         }
 
-        $map_title.html('{0}年 {1}月'.format(year, month));
+        $map_title.html(`${year}年 ${month}月`);
 
         return obj;
     }
@@ -402,7 +402,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
             if (city.color !== undefined) {
                 const $bgObj = $('<div class="city_bg"></div>');
                 $cityObj.append($bgObj);
-                $bgObj.css({ 'background-image': 'url({0}/b{1}.png)'.format(window.pathConfig.gameImage, convColorValue(city.color)) });
+                $bgObj.css({ 'background-image': `url(${window.pathConfig.gameImage}/b${convColorValue(city.color)}.png)` });
             }
 
             const $linkObj = $('<a class="city_link"></a>');
@@ -490,7 +490,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
                 $imgObj.append($capitalObj);
             }
 
-            const $nameObj = $(`<span class="city_detail_name">${city.name}</span>`.format());
+            const $nameObj = $(`<span class="city_detail_name">${city.name}</span>`);
             $imgObj.append($nameObj);
 
             $map_body.append($cityObj);
@@ -647,7 +647,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
             const $cityLink = $world_map.find(`.city_base_${city.id} .city_link`);
 
             if ('clickable' in city && city.clickable > 0) {
-                $cityLink.attr('href', hrefTemplate.format(city.id));
+                $cityLink.attr('href', stringFormat(hrefTemplate, city.id));
             }
 
             if (selectCallback) {

hwe/ts/myPage.ts

@@ -93,10 +93,10 @@ $(function ($) {
 
         const html: string[] = [];
         for (const [key, item] of Object.entries(result.log)) {
-            if ($('#log_{0}_{1}'.format(logType, key)).length) {
+            if ($(`#log_${logType}_${key}`).length) {
                 return true;
             }
-            html.push("<div class='log_{0}' id='log_{0}_{1}' data-seq='{1}'>{2}</div>".format(logType, key, item));
+            html.push(`<div class='log_${logType}' id='log_${logType}_${key}' data-seq='${key}'>${item}</div>`);
         }
         $(`#${logType}Plate`).append(html.join(''));
     })

hwe/ts/processing.ts

@@ -145,28 +145,25 @@ $(function ($) {
                     return item.text;
                 }
                 const element = (item as OptionData).element;
-                if(!element){
+                if (!element) {
                     throw 'invalid type';
                 }
                 const bgcolor = unwrap(element.dataset.color);
                 const fgcolor = unwrap(element.dataset.fontColor);
-                return $("<span><span style='background-color:{0};color:{1};'>　</span>&nbsp;{2}</span>".format(
+                // eslint-disable-next-line no-irregular-whitespace
-                    bgcolor, fgcolor, item.text
+                return $(`<span><span style='background-color:${bgcolor};color:${fgcolor};'>　</span>&nbsp;${item.text}</span>`);
-                ));
             },
             templateResult: function (item) {
                 if ((item as DataFormat).disabled) {
                     return item.text;
                 }
                 const element = (item as OptionData).element;
-                if(!element){
+                if (!element) {
                     throw 'invalid type';
                 }
                 const bgcolor = unwrap(element.dataset.color);
                 const fgcolor = unwrap(element.dataset.fontColor);
-                return $("<div style='padding: 0.75rem 0.375rem; background-color:{0};color:{1};'>{2}</div>".format(
+                return $(`<div style='padding: 0.75rem 0.375rem; background-color:${bgcolor};color:${fgcolor};'>${item.text}</div>`);
-                    bgcolor, fgcolor, item.text
-                ));
             },
             containerCssClass: 'simple-select2-align-center bg-secondary text-secondary',
             dropdownCssClass: 'no-padding simple-select2-align-center bg-secondary text-secondary',

hwe/ts/recruitCrewForm.ts

@@ -9,7 +9,7 @@ declare const currentCrew: number;
 //declare const currentGold: number;
 declare const is모병 = false;
 function calc(id: number) {
-    const $obj = $('#crewType{0}'.format(id));
+    const $obj = $(`#crewType${id}`);
     const crew = parseInt(unwrap_any<string>($obj.find('.form_double').val()));
     const baseCost = $obj.data('cost');
     const $cost = $obj.find('.form_cost');

ts/admin_server.ts

@@ -157,7 +157,7 @@ function drawServerAdminList(serverList: ServerStateResponse) {
         console.log(server);
         let status: string;
         if (!server.valid) {
-            status = '에러, {0}'.format(server.reason);
+            status = `에러, ${server.reason}`;
         }
         else if (!server.run) {
             status = '폐쇄됨';

ts/login.ts

@@ -285,7 +285,7 @@ $(function ($) {
         $map.find('.card').css('width', targetWidth);
         $map.find('.map-container').css({
             'transform-origin': 'top left',
-            'transform': 'scale({0}, {0})'.format(scale),
+            'transform': `scale(${scale}, ${scale})`,
             'height': 500 * scale,
         });
         $map.find('.map_body').data('scale', scale);