{"componentChunkName":"component---src-templates-blog-post-js","path":"/tips-of-console/","result":{"data":{"markdownRemark":{"html":"<!-- ## 在掘金上发现的小技巧 -->\n<h3>使用占位符</h3>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token comment\">// %s 字符串占位符</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'经典%s占位符'</span><span class=\"token punctuation\">,</span><span class=\"token string\">'还就那个'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>   \n<span class=\"token comment\">// %c css格式字符串</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'经典%c占位符'</span><span class=\"token punctuation\">,</span><span class=\"token string\">'color:red;font-weight:bold;'</span><span class=\"token punctuation\">)</span></code></pre></div>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 175px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/9281e941b4140c1cbda3977422be99fb/4edbd/placeholder.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 24.324324324324326%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA6klEQVQY022Q/UvCYBCA/f+h/pAM6UP7kkLDNldr/RhhRG7qltNw+m4qe3dP7KWClQfHcXfcw8PVALTWfExjJmFEMBoTz2aMJ6Hph37ANI5ZLBLSLGM+/zT7MIoQEYqiqGTNAIuCO9uhddGmcdzE6t9z1Dzn9OySxkmL55cB70Mf23HpWQ7dnsXVdac8RYRKGGCuNauVQilFnucss4x0vTF9lmbGpJwnyRKVpsZ0s93+s6sYOg8e7ZuOMaN7C/VDOKjD3j4SRewK+dYr60/+Av1gxOD1zfxM233Ee0IePcR1EaWQP4e7YCXwCzCGeFA4Fp7jAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Image text1\"\n        title=\"Image text1\"\n        src=\"/static/9281e941b4140c1cbda3977422be99fb/4edbd/placeholder.png\"\n        srcset=\"/static/9281e941b4140c1cbda3977422be99fb/12f09/placeholder.png 148w,\n/static/9281e941b4140c1cbda3977422be99fb/4edbd/placeholder.png 175w\"\n        sizes=\"(max-width: 175px) 100vw, 175px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>占位符列表：</p>\n<table>\n<thead>\n<tr>\n<th align=\"center\">占位符</th>\n<th align=\"center\">功能</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td align=\"center\">%s</td>\n<td align=\"center\">字符串</td>\n</tr>\n<tr>\n<td align=\"center\">%d</td>\n<td align=\"center\">整数</td>\n</tr>\n<tr>\n<td align=\"center\">%i</td>\n<td align=\"center\">整数</td>\n</tr>\n<tr>\n<td align=\"center\">%f</td>\n<td align=\"center\">浮点数</td>\n</tr>\n<tr>\n<td align=\"center\">%o</td>\n<td align=\"center\">对象的链接</td>\n</tr>\n<tr>\n<td align=\"center\">%c</td>\n<td align=\"center\">css格式字符串</td>\n</tr>\n</tbody>\n</table>","timeToRead":1,"frontmatter":{"title":"console的小技巧","date":"May 28, 2019","spoiler":null},"fields":{"slug":"/tips-of-console/"}}},"pageContext":{"slug":"/tips-of-console/","previous":{"fields":{"slug":"/for-position-absolute-to-take-effect-the-parent-element-must-be-relative/"},"frontmatter":{"title":"让 position:absolute 生效,父元素必须为 relative ？"}},"next":{"fields":{"slug":"/learn-about-the-console-family/"},"frontmatter":{"title":"了解console家族"}}}},"staticQueryHashes":["3649515864","63159454"]}