diff --git a/.eslintrc.json b/.eslintrc.json
index f676ea14d32370a28081f721d59b5a1d1333b84b..caf7efe8d62f7cb2d46f2cf32a9679c59966e5d4 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -20,7 +20,6 @@
     "comma-dangle": 0,
     "func-names": 0,
     "prefer-const": 0,
-    "prefer-template": 0,
     "arrow-body-style": 0,
     "react/sort-comp": 0,
     "react/no-multi-comp": 0,
diff --git a/components/affix/index.jsx b/components/affix/index.jsx
index c8a1f4185547361ed06948d3ce0a58cb3f70aeda..0c8eb35f65896ee63bbb98a8a455e32e9294ed10 100644
--- a/components/affix/index.jsx
+++ b/components/affix/index.jsx
@@ -4,8 +4,8 @@ import rcUtil from 'rc-util';
 import classNames from 'classnames';
 
 function getScroll(w, top) {
-  let ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
-  let method = 'scroll' + (top ? 'Top' : 'Left');
+  let ret = w[`page${top ? 'Y' : 'X'}Offset`];
+  let method = `scroll${top ? 'Top' : 'Left'}`;
   if (typeof ret !== 'number') {
     let d = w.document;
     // ie6,7,8 standard mode
diff --git a/components/alert/index.jsx b/components/alert/index.jsx
index 91c0f8ad231f946f9309ef1d0bdc9c407884af3a..566718731e4a6f7db37a139f7c34e95bd9d01f06 100644
--- a/components/alert/index.jsx
+++ b/components/alert/index.jsx
@@ -21,10 +21,10 @@ export default React.createClass({
   handleClose(e) {
     e.preventDefault();
     let dom = ReactDOM.findDOMNode(this);
-    dom.style.height = dom.offsetHeight + 'px';
+    dom.style.height = `${dom.offsetHeight}px`;
     // Magic code
     // 重复一次后才能正确设置 height
-    dom.style.height = dom.offsetHeight + 'px';
+    dom.style.height = `${dom.offsetHeight}px`;
 
     this.setState({
       closing: false
@@ -67,10 +67,10 @@ export default React.createClass({
 
     let alertCls = classNames({
       [prefixCls]: true,
-      [prefixCls + '-' + type]: true,
-      [prefixCls + '-close']: !this.state.closing,
-      [prefixCls + '-with-description']: !!description,
-      [prefixCls + '-no-icon']: !showIcon,
+      [`${prefixCls}-${type}`]: true,
+      [`${prefixCls}-close`]: !this.state.closing,
+      [`${prefixCls}-with-description`]: !!description,
+      [`${prefixCls}-no-icon`]: !showIcon,
     });
 
     // closeable when closeText is assigned
@@ -85,9 +85,9 @@ export default React.createClass({
         onEnd={this.animationEnd}>
         <div data-show={this.state.closing} className={alertCls}>
           {showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
-          <span className={prefixCls + '-message'}>{message}</span>
-          <span className={prefixCls + '-description'}>{description}</span>
-          {closable ? <a onClick={this.handleClose} className={prefixCls + '-close-icon'}>
+          <span className={`${prefixCls}-message`}>{message}</span>
+          <span className={`${prefixCls}-description`}>{description}</span>
+          {closable ? <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
             {closeText || <Icon type="cross" />}
           </a> : null}
         </div>
diff --git a/components/badge/ScrollNumber.jsx b/components/badge/ScrollNumber.jsx
index 070efb16d9fdafc96f86b1c3fbe507f1411f9405..9b91e788a3c9e6bf6fa60c05d3987ceb458be1f0 100644
--- a/components/badge/ScrollNumber.jsx
+++ b/components/badge/ScrollNumber.jsx
@@ -76,7 +76,7 @@ class AntScrollNumber extends React.Component {
       className: `${this.props.prefixCls}-only`,
       style: {
         transition: removeTransition && 'none',
-        transform: 'translate3d(0, ' + (-position * height) + 'px, 0)',
+        transform: `translate3d(0, ${-position * height}px, 0)`,
         height,
       },
       key: i,
diff --git a/components/badge/index.jsx b/components/badge/index.jsx
index c21399709e431597ba64c94a9086e6e0252b4690..cd518742884f24b57bbc4c5889eb31be254aa0ee 100644
--- a/components/badge/index.jsx
+++ b/components/badge/index.jsx
@@ -33,7 +33,7 @@ class AntBadge extends React.Component {
         {children}
         <Animate component=""
           showProp="data-show"
-          transitionName={prefixCls + '-zoom'}
+          transitionName={`${prefixCls}-zoom`}
           transitionAppear>
           {
             hidden ? null :
diff --git a/components/breadcrumb/index.jsx b/components/breadcrumb/index.jsx
index ab13e1e724b1d364d764a153005c79884b29c437..f9e0f8bd23de27d9bc52a28d49aa1da47e29640e 100644
--- a/components/breadcrumb/index.jsx
+++ b/components/breadcrumb/index.jsx
@@ -17,14 +17,14 @@ const BreadcrumbItem = React.createClass({
   },
   render() {
     const { prefixCls, separator, children } = this.props;
-    let link = <a className={prefixCls + '-link'} {...this.props}>{children}</a>;
+    let link = <a className={`${prefixCls}-link`} {...this.props}>{children}</a>;
     if (typeof this.props.href === 'undefined') {
-      link = <span className={prefixCls + '-link'} {...this.props}>{children}</span>;
+      link = <span className={`${prefixCls}-link`} {...this.props}>{children}</span>;
     }
     return (
       <span>
         {link}
-        <span className={prefixCls + '-separator'}>{separator}</span>
+        <span className={`${prefixCls}-separator`}>{separator}</span>
       </span>
     );
   }
@@ -62,7 +62,7 @@ const Breadcrumb = React.createClass({
         let link;
         let path = route.path.replace(/^\//, '');
         Object.keys(params).forEach(key => {
-          path = path.replace(':' + key, params[key]);
+          path = path.replace(`:${key}`, params[key]);
         });
         if (path) {
           paths.push(path);
@@ -71,7 +71,7 @@ const Breadcrumb = React.createClass({
         if (i === routes.length - 1) {
           link = <span>{name}</span>;
         } else {
-          link = <a href={'#/' + paths.join('/')}>{name}</a>;
+          link = <a href={`#/${paths.join('/')}`}>{name}</a>;
         }
         return <BreadcrumbItem separator={separator} key={name}>{link}</BreadcrumbItem>;
       });
diff --git a/components/button/button.jsx b/components/button/button.jsx
index 43b33c2d799e0617feabd8f1189a65d1294de52c..b9e7ec61104c614ab5da61c6565075702a9182bf 100644
--- a/components/button/button.jsx
+++ b/components/button/button.jsx
@@ -46,7 +46,7 @@ export default class Button extends React.Component {
       [prefix + type]: type,
       [prefix + shape]: shape,
       [prefix + sizeCls]: sizeCls,
-      [prefix + 'loading']: ('loading' in props && props.loading !== false),
+      [`${prefix}loading`]: ('loading' in props && props.loading !== false),
       [className]: className
     });
 
diff --git a/components/calendar/index.jsx b/components/calendar/index.jsx
index e1dd790b14fcd64f021eed82de24c88918104bd0..cd6266b06f93357de3da630783afa8eb444c8f16 100644
--- a/components/calendar/index.jsx
+++ b/components/calendar/index.jsx
@@ -8,8 +8,8 @@ import Header from './Header';
 function noop() { return null; }
 
 function zerofixed(v) {
-  if (v < 10) return '0' + v;
-  return v + '';
+  if (v < 10) return `0${v}`;
+  return `${v}`;
 }
 
 class Calendar extends Component {
@@ -80,7 +80,7 @@ class Calendar extends Component {
 
     let cls = className || '';
     if (fullscreen) {
-      cls += (' ' + prefixCls + '-fullscreen');
+      cls += (` ${prefixCls}-fullscreen`);
     }
 
     return (
diff --git a/components/carousel/index.jsx b/components/carousel/index.jsx
index c534745eab0a539930a10d0de8bd23ce5605063d..a994d46d9007911b839a113f10a5c54489461022 100644
--- a/components/carousel/index.jsx
+++ b/components/carousel/index.jsx
@@ -34,7 +34,7 @@ const AntCarousel = React.createClass({
 
     let className = 'ant-carousel';
     if (props.vertical) {
-      className = className + ' ant-carousel-vertical';
+      className = `${className} ant-carousel-vertical`;
     }
 
     return (
diff --git a/components/checkbox/demo/basic.md b/components/checkbox/demo/basic.md
index eea91c1169c84e00a9ab67dea56ca39fbb96dbc2..b642019a4bd9bcc731e5513a5e11fca316e90938 100644
--- a/components/checkbox/demo/basic.md
+++ b/components/checkbox/demo/basic.md
@@ -10,7 +10,7 @@
 import { Checkbox } from 'antd';
 
 function onChange(e) {
-  console.log('checked = ' + e.target.checked);
+  console.log(`checked = ${e.target.checked}`);
 }
 
 ReactDOM.render(<label>
diff --git a/components/checkbox/demo/controller.md b/components/checkbox/demo/controller.md
index 7aed7bad8f68f8926b41ccff12c09273f6af50ae..ff636c333ec449200b72b6530b986c9d516d0818 100644
--- a/components/checkbox/demo/controller.md
+++ b/components/checkbox/demo/controller.md
@@ -17,8 +17,7 @@ const App = React.createClass({
     };
   },
   render() {
-    const label = (this.state.checked ? '选中' : '取消') + '-' +
-      (this.state.disabled ? '不可用' : '可用');
+    const label = `${this.state.checked ? '选中' : '取消'}-${this.state.disabled ? '不可用' : '可用'}`;
     return (
       <div>
         <p style={{ marginBottom: '20px' }}>
diff --git a/components/date-picker/index.jsx b/components/date-picker/index.jsx
index f355d14e3d7b5079baa8a6b3dac52ced22993d12..afff94919789858ef16a9144d58452e2ea59f239 100644
--- a/components/date-picker/index.jsx
+++ b/components/date-picker/index.jsx
@@ -119,7 +119,7 @@ function createPicker(TheCalendar, defaultFormat) {
                       value={value && this.getFormatter().format(value)}
                       placeholder={placeholder}
                       style={this.props.style}
-                      className={'ant-calendar-picker-input ant-input' + sizeClass}/>
+                      className={`ant-calendar-picker-input ant-input${sizeClass}`}/>
                     <span className="ant-calendar-picker-icon"/>
                   </span>
                 );
diff --git a/components/dropdown/demo/event.md b/components/dropdown/demo/event.md
index 9cfec951fb91716835b6379767dfb6fcfd9a6fdc..15e189cac8c533500263a89f4b7acd4d099b1ae7 100644
--- a/components/dropdown/demo/event.md
+++ b/components/dropdown/demo/event.md
@@ -9,7 +9,7 @@
 ````jsx
 import { Menu, Dropdown, Icon } from 'antd';
 const onClick = function ({ key }) {
-  console.log('点击了菜单' + key);
+  console.log(`点击了菜单${key}`);
 };
 
 const menu = (
diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx
index 2b7a03524e94a194cdfb391eea21c5ef4c4ebc3f..d96de2627f77bb52d3bbba5474e46921dac6f432 100644
--- a/components/form/FormItem.jsx
+++ b/components/form/FormItem.jsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 function prefixClsFn(prefixCls, ...args) {
   return args.map((s) => {
-    return prefixCls + '-' + s;
+    return `${prefixCls}-${s}`;
   }).join(' ');
 }
 
@@ -13,8 +13,8 @@ class FormItem extends React.Component {
       return '';
     }
     const { span, offset } = colDef;
-    const col = span ? 'col-' + span : '';
-    const offsetCol = offset ? ' col-offset-' + offset : '';
+    const col = span ? `col-${span}` : '';
+    const offsetCol = offset ? ` col-offset-${offset}` : '';
     return col + offsetCol;
   }
 
@@ -80,7 +80,7 @@ class FormItem extends React.Component {
       );
     }
     return (
-      <div className={this.props.prefixCls + '-item-control ' + classes}>
+      <div className={`${this.props.prefixCls}-item-control ${classes}`}>
         {c1}{c2}{c3}
       </div>
     );
diff --git a/components/form/ValueMixin.jsx b/components/form/ValueMixin.jsx
index f7cc5cde61bf74e497873e03095b000a34e7f658..57637057cec66eb339b82e5da3e097c6eb118bc1 100644
--- a/components/form/ValueMixin.jsx
+++ b/components/form/ValueMixin.jsx
@@ -14,7 +14,7 @@ const ValueMixin = {
     let v = e;
     const target = e && e.target;
     if (target) {
-      if ((target.nodeName + '').toLowerCase() === 'input' &&
+      if ((`${target.nodeName}`).toLowerCase() === 'input' &&
         target.type === 'checkbox') {
         v = target.checked;
       } else {
diff --git a/components/form/demo/form-controls.md b/components/form/demo/form-controls.md
index ad47b92b5d4b3833f671c350bf33ffa1e660e919..d616e0ede6b1c8224ef8e31149d1dc74ed19c51a 100644
--- a/components/form/demo/form-controls.md
+++ b/components/form/demo/form-controls.md
@@ -15,7 +15,7 @@ const Option = Select.Option;
 const RadioGroup = Radio.Group;
 
 function handleSelectChange(value) {
-  console.log('selected ' + value);
+  console.log(`selected ${value}`);
 }
 
 ReactDOM.render(
diff --git a/components/input/index.jsx b/components/input/index.jsx
index e6d5e4b14980644b23c55fd09257d31249339db4..e502a70804e912e8c578590241252ab3701e366c 100644
--- a/components/input/index.jsx
+++ b/components/input/index.jsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 function prefixClsFn(prefixCls, ...args) {
   return args.map((s) => {
-    return prefixCls + '-' + s;
+    return `${prefixCls}-${s}`;
   }).join(' ');
 }
 
@@ -25,7 +25,10 @@ function fixControlledValue(value) {
 
 class Group extends React.Component {
   render() {
-    const className = 'ant-input-group ' + (this.props.className || '');
+    const className = classNames({
+      'ant-input-group': true,
+      [this.props.className]: !!this.props.className,
+    });
     return (
       <span className={className} style={this.props.style}>
         {this.props.children}
diff --git a/components/layout/col.jsx b/components/layout/col.jsx
index c8a5423667031935d6d09ef42b4ee511d0a001d3..125b98015853450243f4cee09dabadf17cd26689 100644
--- a/components/layout/col.jsx
+++ b/components/layout/col.jsx
@@ -14,11 +14,11 @@ const Col = React.createClass({
   render() {
     const { span, order, offset, push, pull, className, ...others } = this.props;
     const classes = classNames({
-      ['col-' + span]: span,
-      ['col-order-' + order]: order,
-      ['col-offset-' + offset]: offset,
-      ['col-push-' + push]: push,
-      ['col-pull-' + pull]: pull,
+      [`col-${span}`]: span,
+      [`col-order-${order}`]: order,
+      [`col-offset-${offset}`]: offset,
+      [`col-push-${push}`]: push,
+      [`col-pull-${pull}`]: pull,
       [className]: className,
     });
     return <div {...others} className={classes}>{ this.props.children }</div>;
diff --git a/components/layout/row.jsx b/components/layout/row.jsx
index 234389425dbb7be924d8a3a22609fff2e41ca705..e3934fb820e5540c82693cb6896626d24a6df4c8 100644
--- a/components/layout/row.jsx
+++ b/components/layout/row.jsx
@@ -13,9 +13,9 @@ const Row = React.createClass({
     const { type, justify, align, className, ...others } = this.props;
     const classes = classNames({
       row: true,
-      ['row-' + type]: type,
-      ['row-' + type + '-' + justify]: justify,
-      ['row-' + type + '-' + align]: align,
+      [`row-${type}`]: type,
+      [`row-${type}-${justify}`]: justify,
+      [`row-${type}-${align}`]: align,
       [className]: className,
     });
     return <div {...others} className={classes}>{ this.props.children }</div>;
diff --git a/components/menu/index.jsx b/components/menu/index.jsx
index 631bca517c2ad0654fc4625c5557923f378ebbc5..341810ca515433bdde21ab71e608a1255135b669 100644
--- a/components/menu/index.jsx
+++ b/components/menu/index.jsx
@@ -57,7 +57,7 @@ const AntMenu = React.createClass({
     }
 
     let props = {};
-    const className = this.props.className + ' ' + this.props.prefixCls + '-' + this.props.theme;
+    const className = `${this.props.className} ${this.props.prefixCls}-${this.props.theme}`;
     if (this.props.mode !== 'inline') {
       // 这组属性的目的是
       // 弹出型的菜单需要点击后立即关闭
diff --git a/components/message/index.jsx b/components/message/index.jsx
index 125174f9743f275ce144d6ab5a6fb1336baeddfb..745356b68028040931741b633f29f8017f39af0a 100644
--- a/components/message/index.jsx
+++ b/components/message/index.jsx
@@ -40,7 +40,7 @@ function notice(content, duration = defaultDuration, type, onClose) {
     key,
     duration,
     style: {},
-    content: <div className={'ant-message-custom-content ' + iconClass}>
+    content: <div className={`ant-message-custom-content ${iconClass}`}>
       <Icon className={iconClass} type={iconType} />
       <span>{content}</span>
     </div>,
diff --git a/components/notification/demo/with-btn.md b/components/notification/demo/with-btn.md
index ad741f08ce505495e29ae3736b44e72442c74a16..1b453aa22613e9a046db8982fcb60e9cf185d564 100644
--- a/components/notification/demo/with-btn.md
+++ b/components/notification/demo/with-btn.md
@@ -14,7 +14,7 @@ const close = function () {
 };
 
 const openNotification = function () {
-  const key = 'open' + Date.now();
+  const key = `open${Date.now()}`;
   const btnClick = function () {
     // 隐藏提醒框
     notification.close(key);
diff --git a/components/notification/index.jsx b/components/notification/index.jsx
index 44c125222bfe9863f7bbddab016c2ce0b22af087..83ae2f6283b479ef227b177b3c0350097830af96 100644
--- a/components/notification/index.jsx
+++ b/components/notification/index.jsx
@@ -50,11 +50,11 @@ function notice(args) {
 
     getNotificationInstance().notice({
       content: <div>
-        <Icon className={prefixCls + 'icon-' + args.icon + prefixCls + 'icon'} type={iconType} />
+        <Icon className={`${prefixCls}icon-${args.icon}${prefixCls}icon`} type={iconType} />
 
-        <div className={prefixCls + 'message'}>{args.message}</div>
+        <div className={`${prefixCls}message`}>{args.message}</div>
 
-        <div className={prefixCls + 'description'}>{args.description}</div>
+        <div className={`${prefixCls}description`}>{args.description}</div>
       </div>,
       duration,
       closable: true,
@@ -67,9 +67,9 @@ function notice(args) {
     if (!args.btn) {
       getNotificationInstance().notice({
         content: <div>
-          <div className={prefixCls + 'message'}>{args.message}</div>
+          <div className={`${prefixCls}message`}>{args.message}</div>
 
-          <div className={prefixCls + 'description'}>{args.description}</div>
+          <div className={`${prefixCls}description`}>{args.description}</div>
         </div>,
         duration,
         closable: true,
@@ -80,10 +80,10 @@ function notice(args) {
     } else {
       getNotificationInstance().notice({
         content: <div>
-          <div className={prefixCls + 'message'}>{args.message}</div>
+          <div className={`${prefixCls}message`}>{args.message}</div>
 
-          <div className={prefixCls + 'description'}>{args.description}</div>
-          <span className={prefixCls + 'btn'}>
+          <div className={`${prefixCls}description`}>{args.description}</div>
+          <span className={`${prefixCls}btn`}>
             {args.btn}
           </span>
         </div>,
diff --git a/components/popconfirm/index.jsx b/components/popconfirm/index.jsx
index 7b9f89b443b9e4f04fd6ede57c78a2c35f076e32..79e21f074768becb5d4be59fe59676d7ce042b38 100644
--- a/components/popconfirm/index.jsx
+++ b/components/popconfirm/index.jsx
@@ -65,12 +65,12 @@ export default React.createClass({
     const { title, okText, cancelText, placement, overlayStyle, trigger, ...restProps } = this.props;
     const overlay = (
       <div>
-        <div className={prefixCls + '-content'}>
-          <p className={prefixCls + '-message'}>
+        <div className={`${prefixCls}-content`}>
+          <p className={`${prefixCls}-message`}>
             <Icon type="exclamation-circle" />
             {title}
           </p>
-          <div className={prefixCls + '-buttons'}>
+          <div className={`${prefixCls}-buttons`}>
             <Button onClick={this.cancel} type="ghost" size="small">{cancelText}</Button>
             <Button onClick={this.confirm} type="primary" size="small">{okText}</Button>
           </div>
diff --git a/components/popover/index.jsx b/components/popover/index.jsx
index a90298221191d2a2df23440f25eb7ce30dbdb571..4cf14102e38893a88e1205b543fb67c5062883b3 100644
--- a/components/popover/index.jsx
+++ b/components/popover/index.jsx
@@ -48,8 +48,8 @@ const Popover = React.createClass({
   getOverlay() {
     return (
       <div>
-        {this.props.title && <div className={prefixCls + '-title'}>{this.props.title}</div>}
-        <div className={prefixCls + '-content'}>
+        {this.props.title && <div className={`${prefixCls}-title`}>{this.props.title}</div>}
+        <div className={`${prefixCls}-content`}>
           {this.props.overlay}
         </div>
       </div>
diff --git a/components/progress/demo/format.md b/components/progress/demo/format.md
index 7f84c03485957cc14008e377e5b2300e93b69878..71bfdbeee68e242b923b297f384db84e7e01aadf 100644
--- a/components/progress/demo/format.md
+++ b/components/progress/demo/format.md
@@ -12,7 +12,7 @@ const ProgressCircle = Progress.Circle;
 
 ReactDOM.render(
   <div>
-    <ProgressCircle percent={75} format={percent => percent / 10.0 + '折' } />
+    <ProgressCircle percent={75} format={percent => `${percent / 10.0}折` } />
     <ProgressCircle percent={100} format={() => '成功'} />
   </div>
   , mountNode);
diff --git a/components/progress/index.jsx b/components/progress/index.jsx
index 47e4332b3c689c271f0c2bb896db2e816764295b..d19f281ec84623decdec6d27629be412b2686723 100644
--- a/components/progress/index.jsx
+++ b/components/progress/index.jsx
@@ -60,35 +60,35 @@ let Line = React.createClass({
     if (props.showInfo === true) {
       if (props.status === 'exception') {
         progressInfo = (
-          <span className={prefixCls + '-line-text'}>
+          <span className={`${prefixCls}-line-text`}>
             {props.format ? text : <Icon type="exclamation" />}
           </span>
         );
       } else if (props.status === 'success') {
         progressInfo = (
-          <span className={prefixCls + '-line-text'}>
+          <span className={`${prefixCls}-line-text`}>
             {props.format ? text : <Icon type="check" />}
           </span>
         );
       } else {
         progressInfo = (
-          <span className={prefixCls + '-line-text'}>{text}</span>
+          <span className={`${prefixCls}-line-text`}>{text}</span>
         );
       }
     } else {
-      fullCls = ' ' + prefixCls + '-line-wrap-full';
+      fullCls = ` ${prefixCls}-line-wrap-full`;
     }
     let percentStyle = {
-      width: props.percent + '%',
+      width: `${props.percent}%`,
       height: props.strokeWidth
     };
 
     return (
-      <div className={prefixCls + '-line-wrap clearfix status-' + props.status + fullCls} style={props.style}>
+      <div className={`${prefixCls}-line-wrap clearfix status-${props.status}${fullCls}`} style={props.style}>
         {progressInfo}
-        <div className={prefixCls + '-line-outer'}>
-          <div className={prefixCls + '-line-inner'}>
-            <div className={prefixCls + '-line-bg'} style={percentStyle}></div>
+        <div className={`${prefixCls}-line-outer`}>
+          <div className={`${prefixCls}-line-inner`}>
+            <div className={`${prefixCls}-line-bg`} style={percentStyle}></div>
           </div>
         </div>
       </div>
@@ -147,25 +147,25 @@ let Circle = React.createClass({
 
     if (props.status === 'exception') {
       progressInfo = (
-        <span className={prefixCls + '-circle-text'}>
+        <span className={`${prefixCls}-circle-text`}>
           {props.format ? text : <Icon type="exclamation" />}
         </span>
       );
     } else if (props.status === 'success') {
       progressInfo = (
-        <span className={prefixCls + '-circle-text'}>
+        <span className={`${prefixCls}-circle-text`}>
           {props.format ? text : <Icon type="check" />}
         </span>
       );
     } else {
       progressInfo = (
-        <span className={prefixCls + '-circle-text'}>{text}</span>
+        <span className={`${prefixCls}-circle-text`}>{text}</span>
       );
     }
 
     return (
-      <div className={prefixCls + '-circle-wrap status-' + props.status} style={props.style}>
-        <div className={prefixCls + '-circle-inner'} style={style}>
+      <div className={`${prefixCls}-circle-wrap status-${props.status}`} style={props.style}>
+        <div className={`${prefixCls}-circle-inner`} style={style}>
           <Progresscircle percent={props.percent} strokeWidth={props.strokeWidth}
             strokeColor={statusColorMap[props.status]} trailColor={props.trailColor} />
           {progressInfo}
diff --git a/components/radio/demo/radiobutton.md b/components/radio/demo/radiobutton.md
index ab0b087daca97d5ec78e53d79e2e7ab268bce84d..8b497cc02a1c2919e24b8133241d390b6ef8a8ad 100644
--- a/components/radio/demo/radiobutton.md
+++ b/components/radio/demo/radiobutton.md
@@ -12,7 +12,7 @@ const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
 
 function onChange(e) {
-  console.log('radio checked:' + e.target.value);
+  console.log(`radio checked:${e.target.value}`);
 }
 
 ReactDOM.render(<div>
diff --git a/components/radio/demo/radiogroup.md b/components/radio/demo/radiogroup.md
index aa47f19c0648d0c1804e23746e256323024a2b3b..820bab872c2eb5fc2889cdc234e7491f277b1991 100644
--- a/components/radio/demo/radiogroup.md
+++ b/components/radio/demo/radiogroup.md
@@ -17,7 +17,7 @@ const App = React.createClass({
     };
   },
   onChange(e) {
-    console.log('radio checked:' + e.target.value);
+    console.log(`radio checked:${e.target.value}`);
     this.setState({
       value: e.target.value
     });
diff --git a/components/radio/radio.jsx b/components/radio/radio.jsx
index 5ee484a2e78a24c00592916f5699149b81ed6070..70d0c1974552680ec65c8625edab866022026310 100644
--- a/components/radio/radio.jsx
+++ b/components/radio/radio.jsx
@@ -12,8 +12,8 @@ const AntRadio = React.createClass({
     const { prefixCls, children, checked, disabled, className } = this.props;
     const classString = classNames({
       [prefixCls]: true,
-      [prefixCls + '-checked']: checked,
-      [prefixCls + '-disabled']: disabled,
+      [`${prefixCls}-checked`]: checked,
+      [`${prefixCls}-disabled`]: disabled,
       [className]: !!className,
     });
     return (
diff --git a/components/select/demo/basic.md b/components/select/demo/basic.md
index 88eb7bce75376bc4c87b62f2ba794d887092800c..c0cca70948c174f5e87b0f96565f14859cac6c89 100644
--- a/components/select/demo/basic.md
+++ b/components/select/demo/basic.md
@@ -11,7 +11,7 @@ import { Select } from 'antd';
 const Option = Select.Option;
 
 function handleChange(value) {
-  console.log('selected ' + value);
+  console.log(`selected ${value}`);
 }
 
 ReactDOM.render(
diff --git a/components/select/demo/combobox.md b/components/select/demo/combobox.md
index 79e8eb57ab8d0752783a6527cedcfebe977aca25..7ad9c039770fde7f9fdd0a5ccf7b3d2d6c33db57 100644
--- a/components/select/demo/combobox.md
+++ b/components/select/demo/combobox.md
@@ -23,7 +23,7 @@ const Test = React.createClass({
       options = [];
     } else {
       options = ['gmail.com', '163.com', 'qq.com'].map((domain) => {
-        const email = value + '@' + domain;
+        const email = `${value}@${domain}`;
         return <Option key={email}>{email}</Option>;
       });
     }
diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md
index 1bb4b66e20517f0277eb97447823cc50ade198ef..a4ef77702cba95270475227b65d58153e80dd1b8 100644
--- a/components/select/demo/multiple.md
+++ b/components/select/demo/multiple.md
@@ -17,7 +17,7 @@ for (let i = 10; i < 36; i++) {
 }
 
 function handleChange(value) {
-  console.log('selected ' + value);
+  console.log(`selected ${value}`);
 }
 
 ReactDOM.render(
diff --git a/components/select/demo/optgroup.md b/components/select/demo/optgroup.md
index a023b7625a459a61dfccf7b45dca48ac040f9de0..35e5ce4b4c420da8a2b40d92baf84bb171748630 100644
--- a/components/select/demo/optgroup.md
+++ b/components/select/demo/optgroup.md
@@ -12,7 +12,7 @@ const Option = Select.Option;
 const OptGroup = Select.OptGroup;
 
 function handleChange(value) {
-  console.log('selected ' + value);
+  console.log(`selected ${value}`);
 }
 
 ReactDOM.render(
diff --git a/components/select/demo/search.md b/components/select/demo/search.md
index 256d720a81210341d5e59a9b34eb334e25ceb450..d52f216f3d7559df32d32932c36a7153b9092427 100644
--- a/components/select/demo/search.md
+++ b/components/select/demo/search.md
@@ -11,7 +11,7 @@ import { Select } from 'antd';
 const Option = Select.Option;
 
 function handleChange(value) {
-  console.log('selected ' + value);
+  console.log(`selected ${value}`);
 }
 
 ReactDOM.render(
diff --git a/components/select/demo/size.md b/components/select/demo/size.md
index 394705f85160386dc9817bbc5d41d0f14bc48c5f..369021e879fc29162a1cf3b7c72a9764af39faec 100644
--- a/components/select/demo/size.md
+++ b/components/select/demo/size.md
@@ -11,7 +11,7 @@ import { Select } from 'antd';
 const Option = Select.Option;
 
 function handleChange(value) {
-  console.log('selected ' + value);
+  console.log(`selected ${value}`);
 }
 
 ReactDOM.render(
diff --git a/components/select/demo/tags.md b/components/select/demo/tags.md
index a49af531660a73579623d00b650616fd99043ead..c357a9bc408afc9bde96d2d31c226a6875209f2d 100644
--- a/components/select/demo/tags.md
+++ b/components/select/demo/tags.md
@@ -17,7 +17,7 @@ for (let i = 10; i < 36; i++) {
 }
 
 function handleChange(value) {
-  console.log('selected ' + value);
+  console.log(`selected ${value}`);
 }
 
 ReactDOM.render(
diff --git a/components/slider/demo/tip-formatter.md b/components/slider/demo/tip-formatter.md
index 90f07564cdefa1bc37d6497428b070f6480b28d2..9b3fbbbe11832e5ec8aae73fe07246fcc4c69f30 100644
--- a/components/slider/demo/tip-formatter.md
+++ b/components/slider/demo/tip-formatter.md
@@ -10,7 +10,7 @@
 import { Slider } from 'antd';
 
 function formatter(value) {
-  return value + '%';
+  return `${value}%`;
 }
 
 ReactDOM.render(<div>
diff --git a/components/spin/index.jsx b/components/spin/index.jsx
index 368bc0020b41843de3c82cb38ac3bde421ab919a..355721c3f353949a726b81c97096942963a5393a 100644
--- a/components/spin/index.jsx
+++ b/components/spin/index.jsx
@@ -46,9 +46,9 @@ const AntSpin = React.createClass({
 
     if (this.isNestedPattern()) {
       return (
-        <div className={this.props.spining ? (prefixCls + '-nested-loading') : ''}>
+        <div className={this.props.spining ? (`${prefixCls}-nested-loading`) : ''}>
           {spinElement}
-          <div className={prefixCls + '-container'}>
+          <div className={`${prefixCls}-container`}>
             {this.props.children}
           </div>
         </div>
diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md
index fb9c2d651d1885067f7d42e04ba07a5f9c4facfd..0373d3ebfd14bf2417a0e30a1b5fbd3e843fb321 100644
--- a/components/steps/demo/step-next.md
+++ b/components/steps/demo/step-next.md
@@ -18,7 +18,7 @@ const Step = Steps.Step;
 const array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
 const steps = array.map((item, i) => {
   return {
-    title: '步骤' + (i + 1)
+    title: `步骤${i + 1}`
   };
 });
 
diff --git a/components/switch/demo/basic.md b/components/switch/demo/basic.md
index fde56967e1e8e06f6d228ef26c84b216de159cd2..6f959ef3084864447e35ebfd79edb423bea1ebd4 100644
--- a/components/switch/demo/basic.md
+++ b/components/switch/demo/basic.md
@@ -10,7 +10,7 @@
 import { Switch } from 'antd';
 
 function onChange(checked) {
-  console.log('switch to ' + checked);
+  console.log(`switch to ${checked}`);
 }
 
 ReactDOM.render(
diff --git a/components/table/demo/fixed-header.md b/components/table/demo/fixed-header.md
index b5530925a39738e56d4425949197ccf5fadec621..ad6244b2f9364be1e8d47624de9929b1961b8e89 100644
--- a/components/table/demo/fixed-header.md
+++ b/components/table/demo/fixed-header.md
@@ -26,9 +26,9 @@ const data = [];
 for (let i = 0; i < 100; i++) {
   data.push({
     key: i,
-    name: '李大嘴' + i,
+    name: `李大嘴${i}`,
     age: 32,
-    address: '西湖区湖底公园' + i + '号'
+    address: `西湖区湖底公园${i}号`
   });
 }
 
diff --git a/components/table/demo/paging.md b/components/table/demo/paging.md
index f420afe7cbf750a8d8117ea89071608b7fd148aa..2affb816db9adfb539b58de98b7b3d569b44c631 100644
--- a/components/table/demo/paging.md
+++ b/components/table/demo/paging.md
@@ -27,9 +27,9 @@ const data = [];
 for (let i = 0; i < 46; i++) {
   data.push({
     key: i,
-    name: '李大嘴' + i,
+    name: `李大嘴${i}`,
     age: 32,
-    address: '西湖区湖底公园' + i + '号'
+    address: `西湖区湖底公园${i}号`
   });
 }
 
diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md
index 9c802fc2b745652fbab899a0cd58476b7cb33913..6631b7183fbf7101aa5c34a40e45cadcbf2feea6 100644
--- a/components/table/demo/row-selection-and-operation.md
+++ b/components/table/demo/row-selection-and-operation.md
@@ -26,9 +26,9 @@ const data = [];
 for (let i = 0; i < 46; i++) {
   data.push({
     key: i,
-    name: '李大嘴' + i,
+    name: `李大嘴${i}`,
     age: 32,
-    address: '西湖区湖底公园' + i + '号'
+    address: `西湖区湖底公园${i}号`
   });
 }
 
diff --git a/components/table/demo/row-selection-props.md b/components/table/demo/row-selection-props.md
index 5bc4a95948e8f48fc6a42a9090cd87d018bc103e..ed3af7d2b295ce0a97787a6ba3de88c402b929ba 100644
--- a/components/table/demo/row-selection-props.md
+++ b/components/table/demo/row-selection-props.md
@@ -48,7 +48,7 @@ const rowSelection = {
     };
   },
   onChange(selectedRowKeys) {
-    console.log('selectedRowKeys changed: ' + selectedRowKeys);
+    console.log(`selectedRowKeys changed: ${selectedRowKeys}`);
   },
   onSelect(record, selected, selectedRows) {
     console.log(record, selected, selectedRows);
diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md
index 74e5825fb971a9a5b77db8724c02e1766bbccfd3..eefedba734ed7c4669f7ebe2a801060a0de4fd03 100644
--- a/components/table/demo/row-selection.md
+++ b/components/table/demo/row-selection.md
@@ -42,7 +42,7 @@ const data = [{
 // 通过 rowSelection 对象表明需要行选择
 const rowSelection = {
   onChange(selectedRowKeys) {
-    console.log('selectedRowKeys changed: ' + selectedRowKeys);
+    console.log(`selectedRowKeys changed: ${selectedRowKeys}`);
   },
   onSelect(record, selected, selectedRows) {
     console.log(record, selected, selectedRows);
diff --git a/components/table/index.jsx b/components/table/index.jsx
index 19343620c0545095818e3917d470cebb90f711f7..e97d8d4d14f3d70b79ff7f0de8b94ec90becec2e 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -420,16 +420,16 @@ let AntTable = React.createClass({
           }
         }
 
+        const isAscend = isSortColumn && this.state.sortOrder === 'ascend';
+        const isDescend = isSortColumn && this.state.sortOrder === 'descend';
         sortButton = (
           <div className="ant-table-column-sorter">
-            <span className={'ant-table-column-sorter-up ' +
-                             ((isSortColumn && this.state.sortOrder === 'ascend') ? 'on' : 'off')}
+            <span className={`ant-table-column-sorter-up ${isAscend ? 'on' : 'off'}`}
               title="↑"
               onClick={this.toggleSortOrder.bind(this, 'ascend', column)}>
               <Icon type="caret-up"/>
             </span>
-            <span className={'ant-table-column-sorter-down ' +
-                             ((isSortColumn && this.state.sortOrder === 'descend') ? 'on' : 'off')}
+            <span className={`ant-table-column-sorter-down ${isDescend ? 'on' : 'off'}`}
               title="↓"
               onClick={this.toggleSortOrder.bind(this, 'descend', column)}>
               <Icon type="caret-down"/>
@@ -601,7 +601,7 @@ let AntTable = React.createClass({
       table = <Spin className={spinClassName}>{table}</Spin>;
     }
     return (
-      <div className={'clearfix' + emptyClass}>
+      <div className={`clearfix${emptyClass}`}>
         {table}
         {this.renderPagination()}
       </div>
diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md
index 56678bfda4cd8babfe6169a832e7fa64021d6300..7f5ceeed9e0fb01c7714f382f88363f920c859e6 100644
--- a/components/tabs/demo/editable-card.md
+++ b/components/tabs/demo/editable-card.md
@@ -30,7 +30,7 @@ const Demo = React.createClass({
   },
   add() {
     const panes = this.state.panes;
-    const activeKey = 'newTab' + this.newTabIndex++;
+    const activeKey = `newTab${this.newTabIndex++}`;
     panes.push(<TabPane tab="新建页签" key={activeKey}>新页面</TabPane>);
     this.setState({ panes, activeKey });
   },
diff --git a/components/tabs/index.jsx b/components/tabs/index.jsx
index c277766ddc8263946019a6cde56923e95e3845fa..611c7159e090b758feea669cf55d252b58afd5dc 100644
--- a/components/tabs/index.jsx
+++ b/components/tabs/index.jsx
@@ -30,9 +30,9 @@ class AntTabs extends React.Component {
           children, tabBarExtraContent } = this.props;
     let className = classNames({
       [this.props.className]: !!this. props.className,
-      [prefixCls + '-mini']: size === 'small' || size === 'mini',
-      [prefixCls + '-vertical']: tabPosition === 'left' || tabPosition === 'right',
-      [prefixCls + '-card']: type.indexOf('card') >= 0,
+      [`${prefixCls}-mini`]: size === 'small' || size === 'mini',
+      [`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right',
+      [`${prefixCls}-card`]: type.indexOf('card') >= 0,
     });
     if (tabPosition === 'left' || tabPosition === 'right' || type.indexOf('card') >= 0) {
       animation = null;
@@ -53,14 +53,14 @@ class AntTabs extends React.Component {
       // Add new tab handler
       tabBarExtraContent = (
         <span>
-          <Icon type="plus" className={prefixCls + '-new-tab'} onClick={this.createNewTab} />
+          <Icon type="plus" className={`${prefixCls}-new-tab`} onClick={this.createNewTab} />
           {tabBarExtraContent}
         </span>
       );
     }
     // Wrap the extra content
     tabBarExtraContent = (
-      <div className={prefixCls + '-extra-content'}>
+      <div className={`${prefixCls}-extra-content`}>
         {tabBarExtraContent}
       </div>
     );
diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md
index 5c2f6917215bd6a50d34ae98a097aaa676e6e36b..65490b5454931718c630ce33cb6aa8f386db676e 100644
--- a/components/tag/demo/control.md
+++ b/components/tag/demo/control.md
@@ -29,7 +29,7 @@ const App = React.createClass({
   addTag() {
     const tags = [...this.state.tags];
     index += 1;
-    tags.push({ key: index, name: '新标签' + index });
+    tags.push({ key: index, name: `新标签${index}` });
     this.setState({ tags });
   },
   render() {
diff --git a/components/tag/index.jsx b/components/tag/index.jsx
index d7356b13532d53400af6535f148655a59ca4971e..29ee35cb6530b35d21d20405b9565944323e33b4 100644
--- a/components/tag/index.jsx
+++ b/components/tag/index.jsx
@@ -16,9 +16,9 @@ class AntTag extends React.Component {
 
   close(e) {
     const dom = ReactDOM.findDOMNode(this);
-    dom.style.width = dom.offsetWidth + 'px';
+    dom.style.width = `${dom.offsetWidth}px`;
     // It's Magic Code, don't know why
-    dom.style.width = dom.offsetWidth + 'px';
+    dom.style.width = `${dom.offsetWidth}px`;
     this.setState({
       closing: true,
     });
@@ -40,18 +40,18 @@ class AntTag extends React.Component {
     const close = closable ? <Icon type="cross" onClick={this.close.bind(this)} /> : '';
     const className = classNames({
       [prefixCls]: true,
-      [prefixCls + '-' + color]: !!color,
-      [prefixCls + '-close']: this.state.closing,
+      [`${prefixCls}-${color}`]: !!color,
+      [`${prefixCls}-close`]: this.state.closing,
     });
     return (
       <Animate component=""
         showProp="data-show"
-        transitionName={prefixCls + '-zoom'}
+        transitionName={`${prefixCls}-zoom`}
         transitionAppear
         onEnd={this.animationEnd.bind(this)}>
         {this.state.closed ? null : (
           <div data-show={!this.state.closing} className={className}>
-            <span className={prefixCls + '-text'} {...restProps} />
+            <span className={`${prefixCls}-text`} {...restProps} />
             {close}
           </div>
         )}
diff --git a/components/time-picker/index.jsx b/components/time-picker/index.jsx
index 83a8a525dbc095371222196a3531901d012b900f..aecc2e727f8439fc74a44ec105ff302e984a40b6 100644
--- a/components/time-picker/index.jsx
+++ b/components/time-picker/index.jsx
@@ -86,7 +86,7 @@ const AntTimePicker = React.createClass({
     }
     let className = classNames({
       [props.className]: !!props.className,
-      [props.prefixCls + '-' + props.size]: true,
+      [`${props.prefixCls}-${props.size}`]: true,
     });
     if (props.format.indexOf('ss') < 0) {
       props.showSecond = false;
diff --git a/components/timeline/index.jsx b/components/timeline/index.jsx
index 41e14811db9fcf47948fe4f9df1fa05078990a88..1c6b8765f69b5df57ecc5d28d0a589b066c393e7 100644
--- a/components/timeline/index.jsx
+++ b/components/timeline/index.jsx
@@ -13,15 +13,15 @@ const TimelineItem = React.createClass({
   render() {
     const { prefixCls, color, last, children, pending } = this.props;
     const itemClassName = classNames({
-      [prefixCls + '-item']: true,
-      [prefixCls + '-item-last']: last,
-      [prefixCls + '-item-pending']: pending,
+      [`${prefixCls}-item`]: true,
+      [`${prefixCls}-item-last`]: last,
+      [`${prefixCls}-item-pending`]: pending,
     });
     return (
       <li className={itemClassName}>
-        <div className={prefixCls + '-item-tail'} />
-        <div className={prefixCls + '-item-head ' + prefixCls + '-item-head-' + color} />
-        <div className={prefixCls + '-item-content'}>{children}</div>
+        <div className={`${prefixCls}-item-tail`} />
+        <div className={`${prefixCls}-item-head ${prefixCls}-item-head-${color}`} />
+        <div className={`${prefixCls}-item-content`}>{children}</div>
       </li>
     );
   }
@@ -38,7 +38,7 @@ const Timeline = React.createClass({
     const pendingNode = typeof pending === 'boolean' ? null : pending;
     const className = classNames({
       [prefixCls]: true,
-      [prefixCls + '-pending']: !!pending,
+      [`${prefixCls}-pending`]: !!pending,
     });
     return (
       <ul className={className}>
diff --git a/components/transfer/demo/advanced.md b/components/transfer/demo/advanced.md
index 5d3834321c77222b09590283da27c5d42adaacfd..961d3c0f9e3caa485557c91574c8870b8b7029c0 100644
--- a/components/transfer/demo/advanced.md
+++ b/components/transfer/demo/advanced.md
@@ -26,8 +26,8 @@ const App = React.createClass({
     for (let i = 0; i < 20; i++) {
       const data = {
         key: i,
-        title: '内容' + (i + 1),
-        description: '内容' + (i + 1) + '的描述',
+        title: `内容${i + 1}`,
+        description: `内容${i + 1}的描述`,
         chosen: Math.random() * 2 > 1
       };
       if (data.chosen) {
@@ -60,7 +60,7 @@ const App = React.createClass({
         operations={['向右操作文案', '向左操作文案']}
         targetKeys={this.state.targetKeys}
         onChange={this.handleChange}
-        render={item => item.title + '-' + item.description}
+        render={item => `${item.title}-${item.description}`}
         footer={this.renderFooter} />
     );
   }
diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md
index ace1b7085d71a37e84f0f9a5bb288501877aebce..3c5c682db5c06f66f0bc3d518b006dd5600b71c9 100644
--- a/components/transfer/demo/basic.md
+++ b/components/transfer/demo/basic.md
@@ -25,8 +25,8 @@ const App = React.createClass({
     for (let i = 0; i < 20; i++) {
       const data = {
         key: i,
-        title: '内容' + (i + 1),
-        description: '内容' + (i + 1) + '的描述',
+        title: `内容${i + 1}`,
+        description: `内容${i + 1}的描述`,
         chosen: Math.random() * 2 > 1
       };
       if (data.chosen) {
diff --git a/components/transfer/demo/search.md b/components/transfer/demo/search.md
index 8672bb80a1b37b27228971ae28f4f3077c63ae0e..1911b69151f81225e34f737e14a6ac464f9a66af 100644
--- a/components/transfer/demo/search.md
+++ b/components/transfer/demo/search.md
@@ -25,8 +25,8 @@ const App = React.createClass({
     for (let i = 0; i < 20; i++) {
       const data = {
         key: i,
-        title: '内容' + (i + 1),
-        description: '内容' + (i + 1) + '的描述',
+        title: `内容${i + 1}`,
+        description: `内容${i + 1}的描述`,
         chosen: Math.random() * 2 > 1
       };
       if (data.chosen) {
diff --git a/components/transfer/index.jsx b/components/transfer/index.jsx
index aaf8d2e60725d3bee42a75b0e0041495f68e921c..6bb6fd26793d7a110d4faaba0dd7391a1d47e0d1 100644
--- a/components/transfer/index.jsx
+++ b/components/transfer/index.jsx
@@ -105,22 +105,22 @@ class Transfer extends Component {
       this.filterDataSource(dataSource, filter).map(item => item.key);
 
     this.setState({
-      [direction + 'CheckedKeys']: holder,
+      [`${direction}CheckedKeys`]: holder,
     });
   }
 
   handleFilter(direction, e) {
     this.setState({
       // deselect all
-      [direction + 'CheckedKeys']: [],
+      [`${direction}CheckedKeys`]: [],
       // add filter
-      [direction + 'Filter']: e.target.value,
+      [`${direction}Filter`]: e.target.value,
     });
   }
 
   handleClear(direction) {
     this.setState({
-      [direction + 'Filter']: '',
+      [`${direction}Filter`]: '',
     });
   }
 
@@ -140,7 +140,7 @@ class Transfer extends Component {
       holder.push(selectedItem.key);
     }
     this.setState({
-      [direction + 'CheckedKeys']: holder,
+      [`${direction}CheckedKeys`]: holder,
     });
   }
 
@@ -181,14 +181,14 @@ class Transfer extends Component {
           searchPlaceholder={searchPlaceholder}
           body={body}
           footer={footer}
-          prefixCls={prefixCls + '-list'}/>
+          prefixCls={`${prefixCls}-list`}/>
         <Operation rightActive={rightActive}
           rightArrowText={operations[0]}
           moveToRight={this.moveTo.bind(this, 'right')}
           leftActive={leftActive}
           leftArrowText={operations[1]}
           moveToLeft={this.moveTo.bind(this, 'left')}
-          className={prefixCls + '-operation'}/>
+          className={`${prefixCls}-operation`}/>
         <List titleText={titles[1]}
           dataSource={rightDataSource}
           filter={rightFilter}
@@ -205,7 +205,7 @@ class Transfer extends Component {
           searchPlaceholder={searchPlaceholder}
           body={body}
           footer={footer}
-          prefixCls={prefixCls + '-list'}/>
+          prefixCls={`${prefixCls}-list`}/>
       </div>
     );
   }
diff --git a/components/transfer/list.jsx b/components/transfer/list.jsx
index 8987b94767182b2cad9213927052eb58a90ee544..bd8e9fde779a882679cf4961ac968e3ad7bbe162 100644
--- a/components/transfer/list.jsx
+++ b/components/transfer/list.jsx
@@ -78,7 +78,7 @@ class TransferList extends Component {
 
     const listCls = classNames({
       [prefixCls]: true,
-      [prefixCls + '-with-footer']: !!footerDom,
+      [`${prefixCls}-with-footer`]: !!footerDom,
     });
 
     const showItems = dataSource.map((item) => {
@@ -105,7 +105,7 @@ class TransferList extends Component {
             checked: checkStatus === 'all',
             checkPart: checkStatus === 'part',
             checkable: <span className={`ant-transfer-checkbox-inner`}></span>
-          })}<span className={`${prefixCls}-header-selected`}><span>{(checkedKeys.length > 0 ? checkedKeys.length + '/' : '') + dataSource.length} 条</span>
+          })}<span className={`${prefixCls}-header-selected`}><span>{(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + dataSource.length} 条</span>
           <span className={`${prefixCls}-header-title`}>{titleText}</span></span>
         </div>
         { bodyDom ||
diff --git a/components/transfer/search.jsx b/components/transfer/search.jsx
index c2061641ad7e86a7e08c99aeb3aa6861de0cf7e4..203e36ab883d8a2f7ac432c530953fb6bc5f04cc 100644
--- a/components/transfer/search.jsx
+++ b/components/transfer/search.jsx
@@ -21,13 +21,13 @@ class Search extends Component {
     const { placeholder, value, prefixCls } = this.props;
     return (
       <div>
-        <input placeholder={placeholder} className={ prefixCls + ' ant-input' } value={ value } ref="input"
+        <input placeholder={placeholder} className={ `${prefixCls} ant-input` } value={ value } ref="input"
           onChange={this.handleChange.bind(this)}/>
         { value && value.length > 0 ?
-          <a href="#" className={ prefixCls + '-action' } onClick={this.handleClear.bind(this)}>
+          <a href="#" className={ `${prefixCls}-action` } onClick={this.handleClear.bind(this)}>
             <Icon type="cross-circle" />
           </a>
-          : <span className={ prefixCls + '-action' }><Icon type="search" /></span>
+          : <span className={ `${prefixCls}-action` }><Icon type="search" /></span>
         }
       </div>
     );
diff --git a/components/upload/demo/basic.md b/components/upload/demo/basic.md
index 473b8702b04d432cfa0bb5bed438a93d9017898f..ab4dfbbd1dd33dc4bbf1702e6318b480a0629e22 100644
--- a/components/upload/demo/basic.md
+++ b/components/upload/demo/basic.md
@@ -17,9 +17,9 @@ const props = {
       console.log(info.file, info.fileList);
     }
     if (info.file.status === 'done') {
-      message.success(info.file.name + ' 上传成功。');
+      message.success(`${info.file.name} 上传成功。`);
     } else if (info.file.status === 'error') {
-      message.error(info.file.name + ' 上传失败。');
+      message.error(`${info.file.name} 上传失败。`);
     }
   }
 };
diff --git a/components/upload/demo/multiple.md b/components/upload/demo/multiple.md
index a02a46460535bf886656714c158365df66683ae8..3538ac32cce3b6e220accd371d4ba356c9c548be 100644
--- a/components/upload/demo/multiple.md
+++ b/components/upload/demo/multiple.md
@@ -18,9 +18,9 @@ const props = {
       console.log(info.file, info.fileList);
     }
     if (info.file.status === 'done') {
-      message.success(info.file.name + ' 上传成功。');
+      message.success(`${info.file.name} 上传成功。`);
     } else if (info.file.status === 'error') {
-      message.error(info.file.name + ' 上传失败。');
+      message.error(`${info.file.name} 上传失败。`);
     }
   }
 };
diff --git a/components/upload/index.jsx b/components/upload/index.jsx
index 628f031a29b533b0ebb5a16be5b57a90c3013181..7104d8c274616efa219da549919660544adc5997 100644
--- a/components/upload/index.jsx
+++ b/components/upload/index.jsx
@@ -245,13 +245,12 @@ const AntUpload = React.createClass({
         ? `${prefixCls}-drag-hover` : '';
       return (
         <span className={this.props.className}>
-          <div className={prefixCls + ' ' + prefixCls + '-drag '
-            + dragUploadingClass + ' ' + draggingClass}
+          <div className={`${prefixCls} ${prefixCls}-drag ${dragUploadingClass} ${draggingClass}`}
             onDrop={this.onFileDrop}
             onDragOver={this.onFileDrop}
             onDragLeave={this.onFileDrop}>
             <Upload {...props}>
-              <div className={prefixCls + '-drag-container'}>
+              <div className={`${prefixCls}-drag-container`}>
                 {this.props.children}
               </div>
             </Upload>
@@ -262,8 +261,8 @@ const AntUpload = React.createClass({
     } else if (type === 'select') {
       const uploadButtonCls = classNames({
         [prefixCls]: true,
-        [prefixCls + '-select']: true,
-        [prefixCls + '-select-' + this.props.listType]: true,
+        [`${prefixCls}-select`]: true,
+        [`${prefixCls}-select-${this.props.listType}`]: true,
       });
       if (this.props.listType === 'picture-card') {
         return (
diff --git a/components/upload/uploadList.jsx b/components/upload/uploadList.jsx
index c181735aafcb5f0cb95b0e0d590733f95f8dbd1f..dfe8d9db6503da2e87b46787aecc2893fea54323 100644
--- a/components/upload/uploadList.jsx
+++ b/components/upload/uploadList.jsx
@@ -59,12 +59,12 @@ export default React.createClass({
       if (this.props.listType === 'picture' || this.props.listType === 'picture-card') {
         if (file.status === 'uploading' || (!file.thumbUrl && !file.url)) {
           if (this.props.listType === 'picture-card') {
-            icon = <div className={prefixCls + '-list-item-uploading-text'}>文件上传中</div>;
+            icon = <div className={`${prefixCls}-list-item-uploading-text`}>文件上传中</div>;
           } else {
-            icon = <Icon className={prefixCls + '-list-item-thumbnail'} type="picture" />;
+            icon = <Icon className={`${prefixCls}-list-item-thumbnail`} type="picture" />;
           }
         } else {
-          icon = (<a className={prefixCls + '-list-item-thumbnail'}
+          icon = (<a className={`${prefixCls}-list-item-thumbnail`}
             href={file.url}
             target="_blank"><img src={file.thumbUrl || file.url} alt={file.name} /></a>
           );
@@ -73,7 +73,7 @@ export default React.createClass({
 
       if (file.status === 'uploading') {
         progress = (
-          <div className={prefixCls + '-list-item-progress'}>
+          <div className={`${prefixCls}-list-item-progress`}>
             <Line {...this.props.progressAttr} percent={file.percent} />
           </div>
         );
@@ -84,9 +84,9 @@ export default React.createClass({
       });
       return (
         <div className={infoUploadingClass} key={file.uid}>
-          <div className={prefixCls + '-list-item-info'}>
+          <div className={`${prefixCls}-list-item-info`}>
             {icon}
-            <span className={prefixCls + '-list-item-name'}>{file.name}</span>
+            <span className={`${prefixCls}-list-item-name`}>{file.name}</span>
             {
               this.props.listType === 'picture-card' && file.status !== 'uploading'
               ? (
@@ -107,7 +107,7 @@ export default React.createClass({
     });
     return (
       <div className={listClassNames}>
-        <Animate transitionName={prefixCls + '-margin-top'}>
+        <Animate transitionName={`${prefixCls}-margin-top`}>
           {list}
         </Animate>
       </div>